haiiaaa/chartjs-gauge

Gauge chart for Chart.js

chartjs-gauge

Simple gauge chart for Chart.js

Samples

• Gauge Chart
• Gauge Chart with datalabels plugin
• Gauge Chart with datalabels plugin displaying labels

Install

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

Configuration Options

The gauge chart is based on the Doughnut type. It defines the following additional configuration options. These options are merged with the global chart configuration options, Chart.defaults.global, to form the options passed to the chart.

Name	Type	Default	Description
needle.radiusPercentage	number	2	Needle circle radius as the percentage of the chart area width.
needle.widthPercentage	number	3.2	Needle width as the percentage of the chart area width.
needle.lengthPercentage	number	80	Needle length as the percentage of the interval between inner radius (0%) and outer radius (100%) of the arc.
needle.color	Color	'rgba(0, 0, 0, 1)'	The color of the needle.
valueLabel.display	boolean	true	If true, display the value label.
valueLabel.formatter	function	Math.round	Returns the string representation of the value as it should be displayed on the chart.
valueLabel.fontSize	number	undefined	The font size of the label.
valueLabel.color	Color	'rgba(255, 255, 255, 1)'	The text color of the label.
valueLabel.backgroundColor	Color	'rgba(0, 0, 0, 1)'	The background color of the label.
valueLabel.borderRadius	number	5	Border radius of the label.
valueLabel.padding.top	number	5	Top padding of the label.
valueLabel.padding.right	number	5	Right padding of the label.
valueLabel.padding.bottom	number	5	Bottom padding of the label.
valueLabel.padding.left	number	5	Left padding of the label.
valueLabel.bottomMarginPercentage	number	5	Bottom margin as the percentage of the chart area width.

Default Options

It is common to want to apply a configuration setting to all created gauge charts. The global gauge chart settings are stored in Chart.defaults.gauge. Changing the global options only affects charts created after the change. Existing charts are not changed.

For example, to configure all line charts with radiusPercentage = 5 you would do:

Chart.defaults.gauge.needle.radiusPercentage = 5;

Dataset Properties

The gauge chart requires a value to be specified for the dataset. This is used to draw the needle for the dataset.

Name	Type	Default	Description
value	number	undefined	Value used for the needle.
minValue	number	0	Used to offset the start value.

Example

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

var chart = new Chart(ctx, {
  type: 'gauge',
  data: {
    datasets: [{
      value: 0.5,
      minValue: 0,
      data: [1, 2, 3, 4],
      backgroundColor: ['green', 'yellow', 'orange', 'red'],
    }]
  },
  options: {
    needle: {
      radiusPercentage: 2,
      widthPercentage: 3.2,
      lengthPercentage: 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.

chartjs-gauge's Issues

Extension doesn't work at ChartJs version 3.2.1.

I was trying to use the ChartJs version 3.2.1, but suddenly the gauge doesn't appear. But if i use the 2.9.0 version is still good. Has anyone got the same issue here? Thanks before.

Set Range

I wanted to start my chart at negative values and I can't find any solution online, how can I achieve this?

Please remove the sort from the update override

The GaugeController is currently sorting the dataset that is passed into it via this line of code:

chartjs-gauge/src/controllers/controller.gauge.js

Line 216 in 2ea5054

dataset.data.sort((a, b) => a - b);

This should be removed, or made configurable. I need my data to be displayed in the order that I pass it in as; not a sorted version of it.

ChartJS doughnuts display data in datasets in sequential order. There isn't really a reason for the gauge chart to sort those values by default. If the user wants their data to be sorted, they can sort the dataset themselves, and pass in that sorted dataset into the update() function.

Please let me know your thoughts on this; thanks!

Show Legends

I am trying to include legends on my gauge with each legend equals to 1 legend created. I tried including this to my script:

legend: {
        display: true,
        position: "bottom",
        labels: {
          fontColor: "#333",
          fontSize: 16
        }
      }

but it only outputs undefined and will hide the entire gauge if clicked. Please help.

Change valuelabel font size

Is is possible to change the valueLabel font size ?

Disable ordering

The chart orders the values from left to right. Is it possible to disable it and display them in the order that is given in data?

Create a .min.js file for Chartjs 3.5 version

Hi, I got the Initial Rewrite for ChartJs 3 version (#21), but I need to make it a web-only version for React (without NodeJs/ npm install), The two problems are following :

• The files are in ESModule but i need ton convert them for React
• The files are distribued in three parts in the src folder

How could I recover the files from src to put them in one .js or .min.js, compatible for a React application ?
(For example, the chartjs-gauge.min.js found on other sites works perfectly, but only with ChartJs 2.8)

Thank you for any response

Support IE11

TextHeight calculation can be improved

Line 243 of chartjs-gauge.js measures text height like this:

var textHeight = ctx.measureText('M').width;

This works fine for some fonts, but not so much for other (f.e. Google) fonts. A better method is:

var textHeight = Math.max(ctx.measureText('m').width, ctx.measureText('\uFF37').width);

Now you need to change the default padding to:

padding: { top: 5, right: 5, bottom: 10, left: 5 }

In my tests (I tested with a LOT of Google fonts), these small changes result in a much better design for the needle-value-box.

Cannot find "/dist/bundle.js" in [email protected] - there is a issue with this

was able to load the chart yesterday but today it shows this . what does this mean

how can I use it on Angular 12

looking to implement the gauge in my angular application and was able to create half doughnut but I need to add the needle pointer to gauge, how can I import this package in angular?

rotation doesn't work properly

Hello, and thanks for this plugin, it's great.

I just wanted to report that rotation seems not to be working properly. If you set a rotation in the options different from the default one, for example:

options: {
        rotation: Math.PI * -0.5,
        ...
}

the needle is improperly placed, like in this screenshot:

Would it possible to fix this?
Thanks again for your work.

Add support for Chart.js v4

Any plans to add support for Chart.js v4.
Its a lovely little plugin, shame if it doesn't get used any more.

How can I apply it on vuejs cli 2.6.11?

Hi,

This is a great library, but I'm having a problem importing it to vuejs cli.

Can you guys help me?

Legend

If I enable legend, there is an issue, because I read above the chart "undefined".

Not starting at zero

Hello mates!

See my issue here.

I've created this chart with this rang:

[10000, 12000, 14000, 16000, 18000]

The issue here is that the charts doesn't beggins with zero value, and appears like this:

I supose that the chart is beggining with 0, and that is the reason, but, how can I solve this?

Thx!

How to use with Blazor?

Hey;

Thanks so much for this library and the hard work you've done.

Do you have any guidance on how to use this with Blazor server/webassembly?

Thanks
joe

Is there a way to use it with ng2-charts?

I'd love to use it with ng2-charts, but unfortunately was not able to get it working.

How do you get the largest clockwise direction first?

How do you get the largest clockwise direction first?

Cannot read properties of null (valuePercent)

Hi all, I'm having a problem randomly.

I'm getting the following error:

Cannot read properties of null (reading 'valuePercent')
at n.drawNeedle (chartjs-gauge.min.js:7:1957)
at n.draw (chartjs-gauge.min.js:7:4363)
...

The data config I've created is the following:

        data: {
            datasets: [{
                data: [20, 40, 60, 80, 100],
                value: data['value'],
                backgroundColor: ['#f46d43', '#fdae61', '#ffffbf', '#a6d96a', '#1a9850']
            }]
        },

How can I fix the error?

Thanks.

Online examples

Hi,

Have you thought about publishing the examples online (practically as github pages), so that one could look at it without cloning the repo and then building it? (And/or adding screenhots to the readme and/or adding a to a jsfiddle containing the code from the example in the readme.)

chart value range label

Hello.

I'm using chartjs-gauge well. Is there a way to express the starting and ending values at both ends of the gauge? I want to do it like the picture below.

First of all, I would like to thank everyone for their help.

How to display labels on guage.

Hi,

This is very wonderful liibrary on top of chart.js

I want to create guage chart like this, but there is no way to display label on curve.

Add support for Chart.js v3

Just saw the Chart.js dependency version was v2.8.0