Chart.js radial gauge

Downloads in past


26111.1.03 years ago5 years agoMinified + gzip package size for chartjs-chart-radial-gauge in KB


Chart.js Radial Gauge Chart
Chart.js radial gauge chart implementation
See Live Samples and Code Pen example


npm install --save chart.js chartjs-chart-radial-gauge

Chart Type

The code will register one new chart type with chartjs: radialGauge


Using node:

Or with a script tag
<script src=""></script>

<script src="node_modules/chartjs-chart-radial-gauge/build/Chart.RadialGauge.umd.min.js"></script>

and then use the radialGauge chartType when create a Chart:
var ctx = document.getElementById('chart-area').getContext('2d');
var config = {
    type: 'radialGauge',
    options: {
new Chart(ctx, config);


Here are the configurable options for the radial gauge and their defaults:
options: {
  animation: {
    // Boolean - Whether we animate the rotation of the radialGauge
    animateRotate: true,
    // Boolean - Whether we animate scaling the radialGauge from the centre
    animateScale: true

  // The percentage of the chart that is the center area
  centerPercentage: 80,

  // The rotation for the start of the metric's arc
  rotation: -Math.PI / 2,

  // the color of the radial gauge's track
  trackColor: 'rgb(204, 221, 238)',

  // the domain for the data, default is [0, 100]
  domain: [0, 365],

  // whether arc for the gauge should have rounded corners
  roundedCorners: true,

  // center value options
  centerArea: {
    // whether to display the center text value
    displayText: true,
    // font for the center text
    fontFamily: null,
    // color of the center text
    fontColor: null,
    // the size of the center text
    fontSize: null,
    // padding around the center area
    padding: 4,
    // an image to use for the center background
    backgroundImage: null,
    // a color to use for the center background
    backgroundColor: null,
    // the text to display in the center
    // this could be a string or a callback that returns a string
    // if a callback is provided it will be called with (value, options)
    text: null,
    // the text to display beneath the text specified above
    subText: null,


See my tutorial on medium


yarn install
yarn build