Chartjs-plugin-empty-overlay NPM

Display Overlay on Empty Charts

Chart.js plugin to display a message when the chart has no data or all values in the datasets are zero.

Requires Chart.js 2.1.5 or later.

Usage

You can download the latest version of chartjs-plugin-empty-overlay on GitHub

This plugin has only been tested with line charts, if it doesn't work for your chart type please submit a PR or create an issue.

Configuration

To configure this plugin, you can simply add the following entries to your chart options:

Name	Type	Default	Description
`emptyOverlay.enabled`	`Boolean`	`true`	`true` to enable this plugin, else `false` to disable it for the associated chart.
`emptyOverlay.message`	`String`	`No data available`	The message to display when the chart is empty.
`emptyOverlay.fillStyle`	`String`	`rgba(100,100,100,0.3)`	The color used for the background overlay.
`emptyOverlay.fontColor`	`String`	`rgba(100,100,100,1.0)`	The color of the text fill.
`emptyOverlay.fontStroke`	`String`	`rgba(255,255,255,0.6)`	The color of the stroke around the fill.
`emptyOverlay.fontStrokeWidth`	`Number/String`	`3`	The line or stroke width around the text.
`emptyOverlay.fontSize`	`Number/String`	`auto`	The size of the text displayed when the chart is empty. `auto` is recommended when your chart is responsive. If the chart has fixed dimensions you can specify a number in pixels (without unit).

For example:

{
    emptyOverlay: {           // enabled by default
        fillStyle: 'rgba(255,0,0,0.4)',     // Change the color of the overlay to red with a 40% alpha
        fontColor: 'rgba(255,255,255,1.0)',   // Change the text color to white
        fontStrokeWidth: 0        // Hide the stroke around the text
    }
}

Development

You first need to install node dependencies (requires Node.js):

> npm install

The following commands will then be available from the repository root:

> gulp build            // build dist files
> gulp build --watch    // build and watch for changes
> gulp lint             // perform code linting
> gulp package          // create an archive with dist files and samples

License

chartjs-plugin-empty-overlay is available under the MIT license.

@everything-registry/sub-chunk-1314

6 years ago

7 years ago

7 years ago

7 years ago