This section covers the functionality that is available via the chart toolbar along with configuration details.
- Change the chart type
- Change the colour palette
- Select categories and series columns
- Format the chart
- Download the chart
The chart toolbar appears when the mouse hovers over the top right area of the chart. It allows users to perform the following:
The following sections discuss these toolbar features along with details on how to configure toolbar items.
The chart settings panel allows users to change the chart type as well as the color palette used in the chart as demonstrated below:
Notice that charts are organised into different groups and the current chart can be changed by selecting the icon of a different chart.
The color palette used by the chart can also be changed via the carousel located at the bottom of the chart setting panel.
The chart data panel is used to dynamically change the data being charted as shown below:
Using the chart data panel the category used in the chart can be changed via radio button selections. Multiple series can be charted and these can also be changed via checkbox selection.
Grid columns can either be configured as categories or series for charting or left for the grid to infer based on the data contained in the columns.
For more details on how the grid determines which columns are to be used as chart categories and series see the section on Defining Categories and Series.
The chart format panel allows users to change the appearance of the chart as shown below:
Chart options corresponding to the currently selected chart type appear in the format panel. This gives users full control over the appearance of chart.
The 'Download Chart' toolbar item will download the chart as a PNG file. Note that the chart is drawn using Canvas in the browser and as such the user can also right click on the chart and save just like any other image on a web page.
Configuring Toolbar Items
By default all available toolbar items are included by default. However items can be removed and reordered via
gridOptions.getChartToolbarItems() callback function.
The interface for the
gridOptions.getChartToolbarItems() callback function is shown below:
This function receives the
GetChartToolbarItemsParams object which contains the list of items that are
shown by default in
defaultItems along with the grid API's.
The list returned by the
gridOptions.getChartToolbarItems() callback can be modified to reorder and
omit items from the toolbar. For instance returning an empty array will hide all toolbar items.
The list of available toolbar items are as follows:
'chartSettings', 'chartData', 'chartFormat', 'downloadChart'.
Continue to the next section to learn about the: Chart API.