Skip to content

nagix/chartjs-plugin-style

Repository files navigation

chartjs-plugin-style

npm Bower Travis Code Climate Awesome

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.