Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/nagix/chartjs-plugin-style below:

nagix/chartjs-plugin-style: Chart.js plugin for more styling options

Chart.js plugin for more styling options

This plugin requires Chart.js 2.6.0 or later.

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>

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.

Nothing else than importing the module should be enough.

import 'chartjs-plugin-style';

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

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.

The shadow effect can be controlled with the following properties.

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.

The bevel effect can be controlled with the following properties.

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.

The glow effect can be controlled with the following properties.

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.

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

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.

{
    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)'
        }
    }
}

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

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

chartjs-plugin-style is available under the MIT license.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4