using gauges in ionic 3

Question

I am doing a project in Ionic 3 and need to use a gauge in it.

The examples are of ionic 2 and it is difficult to understand and integrate it. Can anyone please explain how to resolve this issue? If anyone has a working gauge can you please share the code. It'll be helpful for everyone.

Answer 1

You can use highcharts gauge.

I have pretty complex one. It has both guage and pie. In other words custom component. But you can easily get the idea using that Fiddler.

Note: I have put my working code here.Please adjust as you wish.

Since you're using Ionic3/ Angular you can use these npm packages:

npm i highcharts - -save

npm i highcharts-more - -save

npm i highcharts-solid-gauge  - - save

html

 <div [id]="data?.chartId" class="my-chart"></div>

ts

import * as HighCharts from 'highcharts';
import HighchartsMore from 'highcharts-more';
HighchartsMore(HighCharts);

constructor(){}

showChart(totalOfBudgetAndContingency: number, paidPercentage: number, remainingPercentageExcludingPaid: number, contingencyPercentage: number,
    spent: number, spentOnChart: number, remainingAmount: number, daysToGo: number, spentOverColor: string, chartId: string) {
    let chart = HighCharts.chart(chartId, {
      "chart": {
        "height": 400,
        "renderTo": "container",
        "plotBackgroundColor": null,
        "plotBackgroundImage": null,
        "plotBorderWidth": 0,
        "plotShadow": false,
        "backgroundColor": "white"
      },
      "credits": {
        "enabled": false
      },
      "tooltip": {
        "enabled": true
      },
      "title": {
        "useHtml": true,
        "text": "<div style=\"font-size: 1.6rem;\">Remaining</div><br/><div style=\"font-size: 20px;color:" + spentOverColor + "\">" + remainingAmount.toLocaleString() + "</div>",
        "align": "center",
        "verticalAlign": "top",
        "y": 120,
      },
      "subtitle": {
        "useHtml": true,
        "text": "<div style=\"font-size: 1.6rem;\">Days To Go</div><br/><div style=\"font-size: 16px;\">" + daysToGo + "</div>",
        "align": "center",
        "verticalAlign": "top",
        "y": 170,
      },
      "pane": {
        "center": ["50%", "47%"],
        "size": "70%",
        "startAngle": -90,
        "endAngle": 90,
        "background": {
          "borderWidth": 0,
          "backgroundColor": "transparent",
          "innerRadius": "95%",
          "outerRadius": "100%",
          "shape": "arc"
        }
      },
      "yAxis": [{
        "lineWidth": 0,
        "min": 0,
        "max": totalOfBudgetAndContingency, /* Budget + Contingency */
        tickColor: 'white',
        tickWidth: 4,
        minorTickInterval: 'auto',
        minorTickLength: 3,
        minorTickPosition: 'inside',
        tickPixelInterval: 50,
        tickPosition: '',
        tickPositioner: (min, max) => {
          var ticks = [],
            tick = min,
            step = Math.round((max - min) / 10);
          while (tick < max - step / 2) {
            ticks.push(Math.round(tick));
            tick += step;
          }
          ticks.push(Math.round(max));
          return ticks;
        },
        tickLength: 30,

        "labels": {
          "enabled": true,
          distance: 30,
          style: {
            color: '#50a2a7',
            font: '11px Trebuchet MS, Verdana, sans-serif'
          }
        },
        "title": {
          "text": "",
          "useHTML": false,
          "y": 80
        },
        "pane": 0
      }],
      "plotOptions": {
        "series": {
          "enableMouseTracking": false
        },
        "pie": {
          "dataLabels": {
            "enabled": true,
            "distance": 0,
            "style": {
              "fontWeight": "bold",
              "color": "white",
              "textShadow": "0px 1px 2px black"
            }
          },
          "size": "75%",
          "startAngle": -90,
          "endAngle": 90,
          "center": ["50%", "47%"]
        },
        "gauge": {
          "dataLabels": {
            "enabled": false
          },
          "pivot": {
            "radius": 80,
            "borderWidth": 1,
            "borderColor": "transparent",
            "backgroundColor": "white"
          },
          "dial": {
            "radius": "100%",
            "backgroundColor": "#e9b44c",
            "borderColor": "",
            "baseWidth": 60,
            "topWidth": 1,
            "baseLength": "5%",
            "rearLength": "5%"
          }
        }
      },

      "series": [{
        "type": "pie",
        "name": "Budget",
        "innerSize": "80%",
        "data": [{
          "y": paidPercentage, /* Paid as percentage */
          "name": "",
          color: 'rgba(80,162,167, 0.3)'
        }, {
          "y": remainingPercentageExcludingPaid, /* Remaining as percentage excluding paid */
          "name": "",
          color: 'rgba(187,187,187, 0.2)'
        }, {
          "y": contingencyPercentage, /* Contingency as percentage */
          "name": "",
          color: 'rgba(155,41,21, 0.9)'
        }]
      }, {
        "type": "gauge",
        "name": "Spent",
        "data": [spentOnChart], /* Spent */
        "dial": {
          "rearLength": 0
        }
      }],
    });
  }

Here is working Fiddler