Skip to content
chartjs radial gauge chart implementation
Branch: master
Clone or download
Latest commit 7fa84c4 Jan 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs update docs Nov 20, 2018
samples added doc Nov 20, 2018
scripts fixed docs Nov 19, 2018
src fix font size when number Nov 20, 2018
.babelrc initial Nov 18, 2018
.editorconfig
.eslintignore
.eslintrc.yml added samples Nov 18, 2018
.gitignore fix font size when number Nov 20, 2018
.prettierrc
LICENSE added samples Nov 18, 2018
README.md Update README.md Jan 16, 2019
package.json bump version Nov 20, 2018
rollup.config.js added samples Nov 18, 2018
yarn.lock

README.md

Chart.js Radial Gauge Chart

Chart.js radial gauge chart implementation

drawing

See Live Samples and Code Pen example

Install

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

Chart Type

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

Usage

Using node:

require('chart.js');
require('chartjs-chart-radial-gauge');

Or with a script tag

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></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);

Options

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
  }
}

Documentation

See my tutorial on medium

Building

yarn install
yarn build
You can’t perform that action at this time.