• Material
  • Fabric
  • Bootstrap
  • Bootstrap v4
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse

Chart

This sample demonstrates the basic rendering of the Chart control using pivot data. PivotTable Field List is also enabled to change the report at runtime.

DEMO
SOURCE

In this sample, the Pivot View component plots a chart widget based on the pivot report bound to it. This can be achieved by setting the property displayOption.view to Chart. The built-in options are:

Table -> Renders grid widget only, which is the default.
Chart -> Renders chart widget only.
Both -> Renders both grid and chart widget.

You can change the chart type using the Chart Types drop-down list separately. The chart types can be set using the chartSettings.chartSeries.typeproperty. The built-in chart types are:

Column
Line
Spline
Bar
Area
StepArea
SplineArea
StackingColumn
StackingArea
StackingBar
StepLine
Pareto
Bubble
Scatter
StackingColumn100
StackingBar100
StackingArea100
Polar
Radar

In the sample, the field list option is enabled, through which you can see the result in the chart by altering the report dynamically.