gauge_chart.adoc

AngularGaugeChart

The AngularGaugeChart component allows you to create gauge charts.

LIVE DEMO

Figure 1. GaugeChart

XML name of the component: chart:gaugeChart.

Elements of chart:gaugeChart

• arrows – includes the nested arrow elements for the chart arrow axes.

  <chart:arrows>
      <chart:arrow value="60"/>
  </chart:arrows>

• axes – includes the nested axis elements for the chart axes.

  link:../../../../source/chart/chart_axes.xml[role=include]

  The band element enables you to split an axis into several bands, as on the picture above:

  link:../../../../source/chart/chart_axes_band.xml[role=include]

  The endValue and startValue attributes are used to set the range of values on the chart, the valueInterval attribute defines the gauge scale marks.

AngularGaugeChart event listeners:

• ChartClickListener – click on the canvas.

• ChartRightClickListener – right click on the canvas.

For more details, see AmCharts documentation.