chartjs-plugin-style

Chart.js plugin for more styling options

This plugin requires Chart.js 2.6.0 or later.

Installation

You can download the latest version of chartjs-plugin-style from the GitHub releases.

To install via npm:

npm install chartjs-plugin-style --save

To install via bower:

bower install chartjs-plugin-style --save

To use CDN:

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-style@latest/dist/chartjs-plugin-style.min.js"></script>

<script src="https://unpkg.com/chartjs-plugin-style@latest/dist/chartjs-plugin-style.min.js"></script>

Usage

chartjs-plugin-style can be used with ES6 modules, plain JavaScript and module loaders.

chartjs-plugin-style requires Chart.js. Include Chart.js and chartjs-plugin-style.js to your page to enable style options.

Version 0.5 supports the bevel, drop shadow, inner glow, outer glow and overlay effects for datasets and the tooltip. More options are to be added in the upcoming releases.

Usage in ES6 as module

Nothing else than importing the module should be enough.

import 'chartjs-plugin-style';

Tutorial and Samples

You can find a tutorial and samples at nagix.github.io/chartjs-plugin-style.

Configuration

To configure this plugin, you can simply add the following properties to your datasets and tooltip. point* properties are used only in line, radar and scatter charts. hover* properties are not used in a tooptip.

Name	Type	Scriptable	Indexable	Default
backgroundOverlayColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
backgroundOverlayMode	string	Yes	Yes	'source-over'
bevelWidth	number	Yes	Yes	0
bevelHighlightColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
bevelShadowColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
hoverBackgroundOverlayColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
hoverBackgroundOverlayMode	string	Yes	Yes	'source-over'
hoverBevelWidth	number	Yes	Yes	0
hoverBevelHighlightColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
hoverBevelShadowColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
hoverInnerGlowWidth	number	Yes	Yes	0
hoverInnerGlowColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
hoverOuterGlowWidth	number	Yes	Yes	0
hoverOuterGlowColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
hoverShadowOffsetX	number	Yes	Yes	0
hoverShadowOffsetY	number	Yes	Yes	0
hoverShadowBlur	number	Yes	Yes	0
hoverShadowColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
innerGlowWidth	number	Yes	Yes	0
innerGlowColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
outerGlowWidth	number	Yes	Yes	0
outerGlowColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
pointBackgroundOverlayColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
pointBackgroundOverlayMode	string	Yes	Yes	'source-over'
pointBevelWidth	number	Yes	Yes	0
pointBevelHighlightColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
pointBevelShadowColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
pointHoverBackgroundOverlayColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
pointHoverBackgroundOverlayMode	string	Yes	Yes	'source-over'
pointHoverBevelWidth	number	Yes	Yes	0
pointHoverBevelHighlightColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
pointHoverBevelShadowColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
pointHoverInnerGlowWidth	number	Yes	Yes	0
pointHoverInnerGlowColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
pointHoverOuterGlowWidth	number	Yes	Yes	0
pointHoverOuterGlowColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
pointHoverShadowOffsetX	number	Yes	Yes	0
pointHoverShadowOffsetY	number	Yes	Yes	0
pointHoverShadowBlur	number	Yes	Yes	0
pointHoverShadowColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
pointInnerGlowWidth	number	Yes	Yes	0
pointInnerGlowColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
pointOuterGlowWidth	number	Yes	Yes	0
pointOuterGlowColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
pointShadowOffsetX	number	Yes	Yes	0
pointShadowOffsetY	number	Yes	Yes	0
pointShadowBlur	number	Yes	Yes	0
pointShadowColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'
shadowOffsetX	number	Yes	Yes	0
shadowOffsetY	number	Yes	Yes	0
shadowBlur	number	Yes	Yes	0
shadowColor	Color	Yes	Yes	'rgba(0, 0, 0, 0)'

Shadow effect

The shadow effect can be controlled with the following properties.

Name	Description
shadowOffsetX	Indicates the horizontal distance the shadow should extend from the line. See MDN.
shadowOffsetY	Indicates the vertical distance the shadow should extend from the line. See MDN.
shadowBlur	Indicates the size of the blurring effect for the line; this value doesn't correspond to a number of pixels. See MDN.
shadowColor	A standard CSS color value indicating the color of the shadow effect for the line. See Colors.
hoverShadowOffsetX	The horizontal distance the shadow should extend from the element when hovered.
hoverShadowOffsetY	The vertical distance the shadow should extend from the element when hovered.
hoverShadowBlur	The size of the blurring effect when hovered.
hoverShadowColor	The color of the shadow effect when hovered.
pointShadowOffsetX	The horizontal distance the shadow should extend from the point.
pointShadowOffsetY	The vertical distance the shadow should extend from the point.
pointShadowBlur	The size of the blurring effect for the point.
pointShadowColor	The color of the shadow effect for the point.
pointHoverShadowOffsetX	The horizontal distance the shadow should extend from the point when hovered.
pointHoverShadowOffsetY	The vertical distance the shadow should extend from the point when hovered.
pointHoverShadowBlur	The size of the blurring effect for the point when hovered.
pointHoverShadowColor	The color of the shadow effect for the point when hovered.

If the value is undefined, point* values fallback first to the dataset options then to the associated elements.point.* options. The rest of the values fallback to the associated elements.{element type}.* options.

Bevel effect

The bevel effect can be controlled with the following properties.

Name	Description
bevelWidth	The width of the bevel effect.
bevelHighlightColor	The highlight color of the bevel effect.
bevelShadowColor	The shadow color of the bevel effect.
hoverBevelWidth	The width of the bevel effect when hovered.
hoverBevelHighlightColor	The highlight color of the bevel effect when hovered.
hoverBevelShadowColor	The shadow color of the bevel effect when hovered.
pointBevelWidth	The width of the bevel effect for the point.
pointBevelHighlightColor	The highlight color of the bevel effect for the point.
pointBevelShadowColor	The shadow color of the bevel effect for the point.
pointHoverBevelWidth	The width of the bevel effect for the point when hovered.
pointHoverBevelHighlightColor	The highlight color of the bevel effect for the point when hovered.
pointHoverBevelShadowColor	The shadow color of the bevel effect for the point when hovered.

If the value is undefined, point* values fallback first to the dataset options then to the associated elements.point.* options. The rest of the values fallback to the associated elements.{element type}.* options.

Glow effects

The glow effect can be controlled with the following properties.

Name	Description
innerGlowWidth	The width of the inner glow effect.
innerGlowColor	The color of the inner glow effect.
outerGlowWidth	The width of the outer glow effect.
outerGlowColor	The color of the outer glow effect.
hoverInnerGlowWidth	The width of the inner glow effect when hovered.
hoverInnerGlowColor	The color of the inner glow effect when hovered.
hoverOuterGlowWidth	The width of the outer glow effect when hovered.
hoverOuterGlowColor	The color of the outer glow effect when hovered.
pointInnerGlowWidth	The width of the inner glow effect for the point.
pointInnerGlowColor	The color of the inner glow effect for the point.
pointOuterGlowWidth	The width of the outer glow effect for the point.
pointOuterGlowColor	The color of the outer glow effect for the point.
pointHoverInnerGlowWidth	The width of the inner glow effect for the point when hovered.
pointHoverInnerGlowColor	The color of the inner glow effect for the point when hovered.
pointHoverOuterGlowWidth	The width of the outer glow effect for the point when hovered.
pointHoverOuterGlowColor	The color of the outer glow effect for the point when hovered.

If the value is undefined, point* values fallback first to the dataset options then to the associated elements.point.* options. The rest of the values fallback to the associated elements.{element type}.* options.

Overlay effect

The overlay effect can be controlled with the following properties. Note that these properties are not used in a tooltip.

Name	Description
backgroundOverlayColor	The background color overlaid on the element, which can be a standard CSS color value, a CanvasPattern or CanvasGradient object. See Colors.
backgroundOverlayMode	Indicates the type of compositing operation to apply when overlaying a color. See MDN.
hoverBackgroundOverlayColor
hoverBackgroundOverlayMode	Indicates the type of compositing operation to apply when overlaying a color when hovered.
pointBackgroundOverlayColor	The background color overlaid on the point.
pointBackgroundOverlayMode	Indicates the type of compositing operation to apply when overlaying a color on the point.
pointHoverBackgroundOverlayColor	The background color overlaid on the point when hovered.
pointHoverBackgroundOverlayMode	Indicates the type of compositing operation to apply when overlaying a color on the point when hovered.

If the value is undefined, point* values fallback first to the dataset options then to the associated elements.point.* options. The rest of the values fallback to the associated elements.{element type}.* options.

Example usage

{
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [{
            data: [45, 20, 64, 32, 76, 51],
            shadowOffsetX: 3,
            shadowOffsetY: 3,
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            pointBevelWidth: 3,
            pointBevelHighlightColor: 'rgba(255, 255, 255, 0.75)',
            pointBevelShadowColor: 'rgba(0, 0, 0, 0.5)',
            pointShadowOffsetX: 3,
            pointShadowOffsetY: 3,
            pointShadowBlur: 10,
            pointShadowColor: 'rgba(0, 0, 0, 0.5)',
            pointHoverInnerGlowWidth: 20,
            pointHoverInnerGlowColor: 'rgba(255, 255, 0, 0.5)',
            pointHoverOuterGlowWidth: 20,
            pointHoverOuterGlowColor: 'rgba(255, 255, 0, 1)',
            backgroundOverlayColor: ctx.createPattern(img, 'repeat'),
            backgroundOverlayMode: 'multiply'
        }]
    },
    options: {
        tooltips: {
            bevelWidth: 3,
            bevelHighlightColor: 'rgba(255, 255, 255, 0.75)',
            bevelShadowColor: 'rgba(0, 0, 0, 0.5)'
            shadowOffsetX: 3,
            shadowOffsetY: 3,
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    }
}

Building

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-style is available under the MIT license.