Methods
If you want to change the chart at runtime after it has rendered, you may call the following methods of ApexCharts on the chart instance.
render ()
The render() method is responsible for drawing the chart on the page. It is the primary method that has to be called after configuring the options.
Returns
Promise
Once the chart is drawn on the page, a promise is returned
Example
var chart = new ApexCharts(el, options);
chart.render()
exec (chartID, methodName, options)
If you want to call chart methods without referencing the instance of the chart, you can call the exec() method directly.
The exec() method takes chartID as the first parameter and finds the chart instance based on that ID to execute method on that chart instance.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| chartID | String | undefined | The chartID used to identify the chart instance to execute the method on. |
| methodName | String | '' | Any function which can directly be called on chart instance can be named in method parameter. |
| options | Object || Array | The parameters which are accepted in the original method will be passed here in the same order. Below you will find an example of how variable number of parameters are passed to different functions. |
Returns
Promise
After the chart is rendered, a promise is returned
Example
var chart = new ApexCharts(el, {
chart: {
id: 'mychart',
type: 'area'
},
series: [{
data: [2, 33, 14, 8]
}]
});
ApexCharts.exec('mychart', 'updateOptions', {
xaxis: {
labels: {
show: false
}
}
}, false, true);
ApexCharts.exec('mychart', 'updateSeries', [{
data: [32, 44, 31, 41, 22]
}], true);
updateOptions (newOptions, redrawPaths, animate, updateSyncedCharts)
This method allows you to update the configuration object by passing the options as the first parameter. The new config object is merged with the existing config object preserving the existing configuration.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| newOptions | Object | null | The configuration object to merge on the existing one |
| redrawPaths | Boolean | false | When the chart is re-rendered, should it draw from the existing paths or completely redraw the chart paths from the beginning. By default, the chart is re-rendered from the existing paths |
| animate | Boolean | true | Should the chart animate on re-rendering |
| updateSyncedCharts | Boolean | true | All the charts in a group should also update when one chart in a group is updated. |
Returns
Promise
After the chart is rendered again, a promise is returned
Example
var chart = new ApexCharts(el, options);
chart.updateOptions({
xaxis: {
labels: {
show: false
}
},
yaxis: {
min: 20,
max: 100
}
})
updateSeries (newSeries, animate)
Allows you to update the series array overriding the existing one. If you want to append series to existing series, use the appendSeries() method
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| newSeries | Array | [ ] | The series array to override the existing one |
| animate | Boolean | true | Should the chart animate on re-rendering |
Returns
Promise
After the chart is rendered again, a promise is returned
Example
var chart = new ApexCharts(el, options);
chart.updateSeries([{
data: [32, 44, 31, 41, 22]
}])
// example of series in another format
chart.updateSeries([{
data: [{
x: "02-02-2002",
y: 44
}, {
x: "12-02-2002",
y: 51
}]
}])
In cases where you want to update both the series and options together, it is recommented to just call the updateOptions method as shown below.
chart.updateOptions({
series: [{
data: [{
x: "02-02-2002",
y: 44
}, {
x: "12-02-2002",
y: 51
}]
}],
xaxis: {
position: 'top'
}
})
appendSeries (newSeries, animate)
This method allows you to append a new series to the existing one.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| newSeries | Object | The series object to append the existing one | |
| animate | Boolean | true | Should the chart animate on re-rendering |
Returns
Promise
After the chart is rendered again, a promise is returned
Example
var chart = new ApexCharts(el, options);
chart.appendSeries({
name: 'newSeries'
data: [32, 44, 31, 41, 22]
})
toggleSeries (seriesName)
This method allows you to toggle the visibility of series programmatically. Useful when you have a custom legend.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| seriesName | String | undefined | The series name which you want to toggle visibility for. |
Returns
Boolean
The return value indicates whether the series was hidden or shown
Example
var chart = new ApexCharts(el, {
series: [{
name: 'Football'
data: [33, 23, 76, 33]
}, {
name: 'Cricket'
data: [23, 33, 16, 23]
}]
});
chart.toggleSeries('Football')
toggleSeries() Example with Custom Legend
showSeries (seriesName)
This method allows you to show the hidden series. If the series is already visible, this doesn't affect it.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| seriesName | String | undefined | The series name which you want to show. |
Example
var chart = new ApexCharts(el, {
series: [{
name: 'Football'
data: [33, 23, 76, 33]
}, {
name: 'Cricket'
data: [23, 33, 16, 23]
}]
});
chart.showSeries('Football')
hideSeries (seriesName)
This method allows you to hide the visible series. If the series is already hidden, this method doesn't affect it.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| seriesName | String | undefined | The series name which you want to hide. |
Example
var chart = new ApexCharts(el, {
series: [{
name: 'Soccer'
data: [33, 23, 76, 33]
}, {
name: 'Cricket'
data: [23, 33, 16, 23]
}]
});
chart.hideSeries('Cricket')
highlightSeries (seriesName)
This method allows you to highlight a series programmatically. The rest of the series becomes dim in order to give more visual emphasis to the highlighted series.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| seriesName | String | undefined | The series name which you want to highlight. |
Returns
null
Example
var chart = new ApexCharts(el, {
series: [{
name: 'Football'
data: [33, 23, 76, 33]
}, {
name: 'Cricket'
data: [23, 33, 16, 23]
}]
});
chart.highlightSeries('Football')
zoomX (start, end)
Manually zoom into the chart with the start and end X values.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| start X | Number | undefined | The starting x-axis value. Accepts timestamp or a number |
| end X | Number | undefined | The ending x-axis value. Accepts timestamp or a number |
Example
var chart = new ApexCharts(el, {
series: [{
data: [33, 23, 76, 33]
}]
});
chart.zoomX(new Date('2011-02-01').getTime(), new Date('2011-02-10').getTime())
resetSeries (shouldUpdateChart, shouldResetZoom)
Resets all toggled series and bring back the chart to its original state.
Optional Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| shouldUpdateChart | Boolean | true | After resetting the series, the chart data should update and return to it's original series. |
| shouldResetZoom | Boolean | true | If the user has zoomed in when this method is called, the zoom level should also reset. |
Example
var chart = new ApexCharts(el, {
series: [{
name: 'Football'
data: [33, 23, 76, 33]
}, {
name: 'Cricket'
data: [23, 33, 16, 23]
}]
});
chart.toggleSeries('Football')
chart.resetSeries()
appendData (newData)
This method allows you to append new data to the series array. If you have existing multiple series, provide the new array in the same indexed order.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| newData | Array | [ ] | The data array to append the existing series datasets |
Returns
Promise
After the chart is rendered again, a promise is returned
Example
var chart = new ApexCharts(el, options);
chart.appendData([{
data: [32, 44, 31, 41, 22]
}, {
data: [12, 11, 32, 44, 5]
}])
toggleDataPointSelection (seriesIndex, dataPointIndex)
This method allows you to select/deselect a data-point of a particular series.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| seriesIndex | Number | undefined | Index of the series array. If you are rendering a pie/donut/radialBar chart, this acts as dataPointIndex and is the only thing you have to provide as pie/donut/radialBar don't support multi-series chart. |
| dataPointIndex | Number | undefined | Index of the data-point in the series selected in previous argument. Not required in pie/donut/radialBar |
Returns
The DOM element which is toggled is returned. If not found, returns null
Example
var chart = new ApexCharts(el, {
chart: {
type: 'bar'
},
series: [{
data: [32, 44, 65, 12, 63]
}, {
data: [42, 12, 43, 53, 44]
}]
});
chart.toggleDataPointSelection(1, 3);
// This will toggle the 4th element of the 2nd series i.e. 53 and highlight the DOM element with a different shade.
Q: How do you know which data points are already selected?
A: You can use chart.w.globals.selectedDataPoints array which contains necessary information. In the example above, chart.w.globals.selectedDataPoints will contain [undefined, [3]].
This also trigger the chart.dataPointSelection event
addXaxisAnnotation (options, pushToMemory)
The addXaxisAnnotation() method can be used to draw annotations after chart is rendered.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| options | Object | This function accepts the same parameters as it accepts in the annotations x-axis config. | |
| pushToMemory | Boolean | true | When enabled, it preserves the annotations in subsequent chart updates. If you don't want it to be saved for the next updates, turn off this option |
Returns
ApexCharts context
Example
var chart = new ApexCharts(el, options);
chart.addXaxisAnnotation({
x: 40,
label: {
text: 'Lorem Ipsum'
},
})
addYaxisAnnotation (options, pushToMemory)
The addYaxisAnnotation() method can be used to draw annotations after chart is rendered.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| options | Object | This function accepts the same parameters as it accepts in the annotations y-axis config. | |
| pushToMemory | Boolean | true | When enabled, it preserves the annotations in subsequent chart updates. If you don't want it to be saved for the next updates, turn off this option |
Returns
ApexCharts context
Example
var chart = new ApexCharts(el, options);
chart.addYaxisAnnotation({
y: 40,
yAxisIndex: 0,
label: {
text: 'Lorem Ipsum'
},
})
addPointAnnotation (options, pushToMemory)
The addPointAnnotation() method can be used to draw annotations after chart is rendered.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| options | Object | This function accepts the same parameters as it accepts in the point annotations config. | |
| pushToMemory | Boolean | true | When enabled, it preserves the annotations in subsequent chart updates. If you don't want it to be saved for the next updates, turn off this option |
Returns
ApexCharts context
Example
var chart = new ApexCharts(el, options);
chart.addPointAnnotation({
x: new Date('15 Jan 2017').getTime(),
y: 40,
label: {
text: 'Lorem Ipsum'
},
})
removeAnnotation (id)
The removeAnnotation() method can be used to delete any previously added annotations. Only annotations which are added by external methods (addPointAnnotation, addXaxisAnnotation, addYaxisAnnotation) are affected. Annotations defined in the options/config object are not affected.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| id | String | undefined | The unqiue identifier of the annotation which was created using the addPointAnnotation, addXaxisAnnotation or addYaxisAnnotation methods. |
Returns
None
Example
var chart = new ApexCharts(el, options);
chart.addPointAnnotation({
id: 'my-annotation',
x: new Date('15 Jan 2017').getTime(),
y: 40,
label: {
text: 'Lorem Ipsum'
},
})
chart.removeAnnotation('my-annotation')
clearAnnotations ()
The clearAnnotations() method is used to delete all annotation elements which are added dynamically using the three methods stated above.
Parameters
None
Returns
ApexCharts context
Example
var chart = new ApexCharts(el, options);
chart.clearAnnotations()
dataURI ({ scale, width })
The dataURI() method is used to get base64 dataURI. Then this dataURI can be used to generate PDF using jsPDF
Parameters
| Name | Type | Description |
|---|---|---|
| options | Object | The options object accepts scale or width property which allows to adjust the size of the exported graphic. scale/width both accepts a number. |
Returns
Promise
Example
var chart = new ApexCharts(el, options);
var dataURL = chart.dataURI().then(({ imgURI, blob }) => {
const { jsPDF } = window.jspdf
const pdf = new jsPDF();
pdf.addImage(imgURI, 'PNG', 0, 0);
pdf.save("pdf-chart.pdf");
})
clearAnnotations ()
Once you have set the default locale initially by chart.defaultLocale property, you can dynamically change it during runtime using setLocale() method. The method assumes that you have already specified the locales array in chart.locales when initializing the charts.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| localeName | String | undefined | The 2 digit locale code which you provide in the chart.locales option. |
Returns
None
Example
var chart = new ApexCharts(el, options);
chart.setLocale('fr')
destroy ()
Removes the SVG element that belongs to the chart instance also removing all events handlers attached to it.
Example
var chart = new ApexCharts(el, options);
chart.destroy();