Chart options can be configured through the chart property of the OptionsObject. In this guide, we will show what can be configured on the chart.
Learn how to set options.
Flexmonster provides seven chart types. Learn more about each type and how to set them in the Flexmonster Pivot Charts guide.
If the viewType option is set to "grid_charts", you can manage the position of the chart relative to the grid (top, bottom, left, or right) using the chart.position property:
options: {
chart: {
type: "bar",
position: "top"
}
}To hide filter controls on the chart, use the chart.showFilter property:
options: {
chart: {
showFilter: false
}
}Note To hide filter controls on the grid view, use the grid.showFilter option.
To control whether the measures dropdown menu is displayed on the chart, use the chart.showMeasures property:
options: {
chart: {
showMeasures: false
}
}To show the menu only if several measures are available, set the chart.showOneMeasureSelection property to false. The dropdown will be hidden when only one measure is available and shown when there are two or more measures:
options: {
chart: {
showOneMeasureSelection: false
}
}By default, the first measure in the slice is used for the chart. You can change it by setting the chart.activeMeasure:
options: {
chart: {
activeMeasure: {
uniqueName: "Price",
aggregation: "sum"
}
}
}You can also change the active measure via the UI using the measures dropdown menu.
You can display multiple measures on a single chart for column, bar, line, and scatter chart types. To do that, set the chart.multipleMeasures property to true. After that, you can select which measures should be displayed using the chart.activeMeasure property:
options: {
chart: {
multipleMeasures: true,
activeMeasure: [
{
uniqueName: "Price",
aggregation: "sum"
},
{
uniqueName: "Discount",
aggregation: "sum"
}
]
}
}To enable the use of multiple measures via the UI, hover over the Charts () tab on the Toolbar and select the Multiple measures checkbox.
To show or hide the legend, configure the chart.showLegend property:
options: {
chart: {
showLegend: false
}
}To specify whether the button to show or hide the legend for the charts is visible, use the chart.showLegendButton option:
options: {
chart: {
showLegendButton: true
}
}By default, labels with data values are hidden. To display them on the chart, enable the chart.showDataLabels property:
options: {
chart: {
showDataLabels: true
}
}Note To display data labels for the pie chart, use the chart.showAllLabels property.
By default, axes labels display full numeric values (e.g., 400000). To show axes labels on charts using a short number format like 10K, 10M, 10B, 10T, set chart.axisShortNumberFormat to true:
options: {
chart: {
axisShortNumberFormat: true
}
}You can configure more chart options: