[Chartjs]-Error: Failed to create chart: can't acquire context from the given item

by

0👍

✅

Based on the template you mentioned, and your chart syntax, it seems you’re using an "ApexCharts" chart. Although I can’t see which version the template uses, I reproduced it with the following changes to your code:

  • Included the latest ApexCharts library CDNs here: https://cdnjs.com/libraries/apexcharts
  • Removed the "#" from GetElementById.
  • Renamed the Chart() call to ApexCharts() (this naming might be specific to your template, so you might not need to do this)
  • Called myChart.render(); at the end.

You can see it working here: https://jsfiddle.net/espriella/r0yva4ug/4/

var ctx = document.getElementById("chart-combinedd");
var myChart = new ApexCharts(ctx, {
                    chart: {
                        height: 397,
                        type: "line",
                        toolbar: {
                            show: !1
                        }
                    },
                    series: [{
                        name: "Website Blog",
                        type: "column",
                        data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
                    }, {
                        name: "Social Media",
                        type: "line",
                        data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
                    }],
                    stroke: {
                        width: [0, 4]
                    },
                    labels: ["01 Jan 2001", "02 Jan 2001", "03 Jan 2001", "04 Jan 2001", "05 Jan 2001", "06 Jan 2001", "07 Jan 2001", "08 Jan 2001", "09 Jan 2001", "10 Jan 2001", "11 Jan 2001", "12 Jan 2001"],
                    xaxis: {
                        type: "datetime"
                    },
                    yaxis: [{
                        title: {
                            text: "Website Blog"
                        }
                    }, {
                        opposite: !0,
                        title: {
                            text: "Social Media"
                        }
                    }]
                });
myChart.render();

Leave a comment