chartjs-gauge

chartjs-gauge-v3

Simple gauge chart for Chart.js >= 3.6.0?

Fork of the chartjs-gauge.

Samples

• Gauge Chart
• Gauge Chart like clock?!
• Gauge Chart with datalabels plugin
• Gauge Chart with datalabels plugin displaying labels

Install

• yarn install: yarn add chart.js chartjs-gauge-v3
• npm install: npm install --save chart.js chartjs-gauge-v3

Use the following command to see samples:

$ npx http-server node_modules/chartjs-guage-v3

Interfaces

• GaugeControllerChartOptions
• NeedleOptions

• ValueLabelOptions

• GaugeControllerDatasetOptions

Example

var ctx = document.getElementById("canvas").getContext("2d");

var chart = new Chart(ctx, {
  type: 'gauge',
  data: {
    datasets: [{
      value: 65,
      minValue: 0,
      data: [50, 70, 90, 100],
      backgroundColor: ['green', 'yellow', 'orange', 'red'],
    }]
  },
  options: {
    needle: {
      radius: "20%",
      width: "10%",
      length: "80%",
      color: 'rgba(0, 0, 0, 1)'
    },
    valueLabel: {
      display: true,
      formatter: (value) => {
        return '$' + Math.round(value);
      },
      color: 'rgba(255, 255, 255, 1)',
      backgroundColor: 'rgba(0, 0, 0, 1)',
      borderRadius: 5,
      padding: {
        top: 10,
        bottom: 10
      }
    }
  }
});

License

chartjs-gauge is available under the MIT license.