2.5.1. AngularGaugeChart

The AngularGaugeChart component allows you to create gauge charts.

gauge chart
Figure 14. 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.

    <chart:axes>
        <chart:axis id="blue"
                    axisColor="#67b7dc"
                    axisThickness="3"
                    gridInside="false"
                    inside="false"
                    radius="100%"
                    valueInterval="20"
                    tickColor="#67b7dc"/>
        <chart:axis labelsEnabled="true"
                    axisColor="#fdd400"
                    axisThickness="3"
                    endValue="160"
                    radius="80%"
                    valueInterval="20"
                    tickColor="#fdd400"/>
    </chart:axes>

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

    <chart:axes>
        <chart:axis axisAlpha="0.2"
                    axisThickness="1"
                    bottomText="60 km/h"
                    bottomTextYOffset="-20"
                    endValue="220"
                    tickAlpha="0.2"
                    valueInterval="20">
            <chart:bands>
                <chart:band color="#84b761"
                            endValue="90"
                            startValue="0"/>
                <chart:band color="#fdd400"
                            endValue="130"
                            startValue="90"/>
                <chart:band color="#cc4748"
                            endValue="220"
                            innerRadius="95%"
                            startValue="130"/>
            </chart:bands>
        </chart:axis>
    </chart:axes>

    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.