Get chart instance from DOM element

[rr93]

My chart is defined as:

var lineChart = new CanvasJS.Chart("lineChartContainer", {
        animationEnabled: true,
        axisY :{
            includeZero: false,
            gridColor: "rgba(140, 140, 140, 1)"
        },
        toolTip: {
            shared: true,
            content: false
        },
        legend: {
            fontSize: 13
        },
        data: lineChartData.json
    });

And I’m trying to access the instance of the chart via its DOM element by any of the two methods:

var charr = $('#lineChartContainer').CanvasJS()
var charr = $('#lineChartContainer').CanvasJSChart()

The first says CanvasJS is not a function and the second returns an undefined object. I’m using the JQuery plugin. Please advise.

• This topic was modified 3 years, 2 months ago by rr93.
• This topic was modified 3 years, 2 months ago by Vishwas R.

[Indranil]

@rr93,

Based on the code sample shared by you, it seems like you are trying to create the chart in JavaScript way and using the jQuery plugin to get a reference to the chart object. Instead, you can create the chart in jQuery way using $("#chartContainer").CanvasJSChart(options); then get a reference to the chart object using $("#chartContainer").CanvasJSChart();. Please take a look at this documentation page for more information on creating chart using the jQuery plugin.

___________
Indranil Deo
Team CanvasJS

[rr93]

@Indranil okay, so there’s no way to get the chart’s instance if the chart is created the JavaScript way? It’s only possible with the jQuery way?

And are there any “side-effects” I should know about if I change my chart to being created with jQuery as opposed to how it is now? Or would they behave exactly the same way?

[Indranil]

@rr93,

CanvasJS jQuery plugin is just a wrapper for CanvasJS JavaScript chart, which allow you to integrate CanvasJS Charts the jQuery way i.e. $("selector").someAction().

There are no side-effects or any difference between them apart from the way it’s been used. With jQuery plugin you can get a reference to the chart object through the DOM element using $("#myChartContainer").CanvasJSChart(); if it’s created using jQuery plugin ( $("#myChartContainer").CanvasJSChart(chartOptions); ).

___________
Indranil Deo
Team CanvasJS