toolbar

  
  chart: {
      toolbar: {
        show: true,
        offsetX: 0,
        offsetY: 0,
        tools: {
          download: true,
          selection: true,
          zoom: true,
          zoomin: true,
          zoomout: true,
          pan: true,
          reset: true | '<img src="/static/icons/reset.png" width="20">',
          customIcons: []
        },
        export: {
          csv: {
            filename: undefined,
            columnDelimiter: ',',
            headerCategory: 'category',
            headerValue: 'value',
            categoryFormatter(x) {
              return new Date(x).toDateString()
            }
            valueFormatter(y) {
              return y
            }
          },
          svg: {
            filename: undefined,
          },
          png: {
            filename: undefined,
          }
        },
        autoSelected: 'zoom' 
      },
  }

chart

toolbar

show: Boolean

Display the toolbar / menu in the top right corner.

offsetX: Number

Sets the left offset of the toolbar.

offsetY: Number

Sets the top offset of the toolbar.

tools

download: Boolean | String

Show the download menu / hamburger icon in the toolbar. If you want to display a custom icon instead of hamburger icon, you can provide HTML string in this property.


download: true 
/* OR */
download: '<img src="/static/icons/download.png" class="ico-download" width="20">'

ApexCharts has built-in support to allow exporting the chart to popular image formats like PNG or SVG and also allows exporting the chart data to a CSV file.

By default, all XY charts have the toolbar enabled in them which has a hamburger icon at the top right corner.
Clicking the hamburger icon opens a menu which has following options to download

Export to SVG
Export to PNG
Export to CSV creates a comma separated values file, which consists of chart data.

selection: Boolean | String

Show the rectangle selection icon in the toolbar. If you want to display a custom icon for selection, you can provide HTML string in this property.

Make sure to also enable chart.selection when showing the selection tool.


chart: {
  selection: {
    enabled: true
  }
}

zoom: Boolean | String

Show the zoom icon which is used for zooming by dragging selection on the chart area. If you want to display a custom icon for zoom, you can provide HTML string in this property.

zoomin: Boolean | String

Show the zoom-in icon which zooms in 50% from the visible chart area. If you want to display a custom icon for zoom-in, you can provide HTML string in this property.

zoomout: Boolean | String

Show the zoom-out icon which zooms out 50% from the visible chart area. If you want to display a custom icon for zoom-out, you can provide HTML string in this property.

pan: Boolean | String

Show the panning icon in the toolbar.

reset: Boolean | String

Reset the chart data to it’s initial state after zommin/zoomout/panning. If you want to display a custom icon for reset, you can provide HTML string in this property.

customIcons: Array

Allows to add additional icon buttons in the toolbar. In the below example, index should be used to place at a particular position in the toolbar.


customIcons: [{
icon: '<img src="/static/icons/chart-carpet.png" width="20">',
index: 4,
title: 'tooltip of the icon',
class: 'custom-icon',
click: function (chart, options, e) {
  console.log("clicked custom-icon")
}
}]

export: {

csv: {

filename: String

Name of the csv file. Defaults to auto generated chart ID

columnDelimiter: String

Delimeter to separate data-items. Defaults to comma.

headerCategory: String

Column Title of X values

headerValue: String

Column Title of Y values

categoryFormatter: Function

Format the x values when exporting to CSV.

valueFormatter: Function

Format the y values when exporting to CSV.

svg:

filename: String

Name of the SVG file. Defaults to auto generated chart ID

png:

filename: String

Name of the PNG file. Defaults to auto generated chart ID

autoSelected: String

Automatically select one of the following tools when the chart loads.

zoom
selection
pan

Why Choose ApexCharts

toolbar

Stay Updated