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.