1.6.1. AngularGaugeChart

The AngularGaugeChart component allows you to create gauge charts.

LIVE DEMO
gauge chart
Figure 2. 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.