Error: Failed to create chart: can’t acquire context from the given item

So, i have downloaded a bootstrap template and i’m trying to change the data of the charts using js: So the html:

<div id="chart-combinedd"></div>

JS:

var ctx = document.getElementById("#chart-combinedd");
var myChart = new Chart(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"
                        }
                    }]
                });

But i get in the console this error:

Failed to create chart: can’t acquire context from the given item

and no data show up in the chart. The original javascript code from the template in main.js file:

h = {
                    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"
                        }
                    }]
                },
            p = new n.a(document.querySelector("#chart-combined"), h),

The template that im using: https://demo.dashboardpack.com/architectui-html-pro/dashboards-minimal-1.html

Answer

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();