Chart.js plugin for more styling options

Overview

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.

Comments
  • Remove trend line glow

    Remove trend line glow

    Hey :)

    I've added the following to my chart:

    outerGlowWidth: 10,
    outerGlowColor: 'rgba(102, 85, 32, 1)',
    

    and it seems like I have also hidden trend line drawn on my chart since the glow has been added to this line too and make it visible. is there any way to remove it ?

    Thank you, merry christmas and happy new year!

    bug 
    opened by cohenu 11
  • Make the module exportable

    Make the module exportable

    Is there a way how to import your code into a react application without use of HTML <script> tag? I would like to use it in my application that is written in the react, but I am using the native chartjs on one page. I would like to have the option like with chartjs-plugin-datalabels that it will register itself once the module is imported:

    import Chart from 'chart.js';
    import ChartDataLabels from 'chartjs-plugin-datalabels.js';
    

    and in case I need I can unregister it via:

    Chart.plugins.unregister(ChartPluginStyle);
    
    question 
    opened by koprivajakub 4
  • Nice plugin

    Nice plugin

    Nice plugin you've made for ChartJS!

    Thanks!

    Just one note: https://nagix.github.io/chartjs-plugin-style/

    The first items doesn't appear until you scroll. So the page looks empty when you land on it. Maybe it's better to make the first item always visible.

    Thanks for your work!

    enhancement 
    opened by Hedva 1
  • conflict

    conflict

    chartjs-plugin-style conflict with chartjs-plugin-zoom. When i zoomed on left in line chart it makes copy data from right side and push on left. So if you have 5 line after zooming you will have 10 lines.

    bug 
    opened by miodragma 0
  • Gulp Build not generating files

    Gulp Build not generating files

    Hello, I'm trying to fix your plugin for chart.js 3 but the command gulp build is not saving files to the dist folder. I als already made a pull request to fix a path of rollup.

    opened by vin-ni 0
  • Not working with chartjs 3.5.1

    Not working with chartjs 3.5.1

    I need to use this plugin for styling tooltip boxShadow but in latest version of chart.js all the options are different so it's not working with latest version :(

    Any Solutions / Fix?

    opened by monab 6
  • How change size of shadow of point ?

    How change size of shadow of point ?

    How i can resize shadow ? i need increase size of shadow of point in line graph

    my config: var config = { type: 'line', data: { labels: [], datasets: [{ label: '', backgroundColor: window.chartColors.green, borderColor: window.chartColors.green, data: [ ], fill: false, shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 10, shadowColor: effectColors.shadow }] }, options: { responsive: true, legend: { display: false }, plugins: { title: { display: false, text: '' }, tooltip: { mode: 'index', intersect: false, } }, hover: { mode: 'nearest', intersect: true }, scales: { xAxes: [{ scaleLabel: { display: true, labelString: 'Two' }, ticks: { maxTicksLimit: 40 } }], yAxes: [{ scaleLabel: { display: true, labelString: 'One' }, ticks: { maxTicksLimit: 20 } }] } } };

    opened by derdek 0
  • Can we specifie glow properties ?

    Can we specifie glow properties ?

    Hi, I'm using Chart.js to display 2 vertical stacked bar and I want to use the glow style effect on one of them. So I wanted to know if there is a way of using the glow effect on the border of a stacked bar and not only the bars inside.

    opened by GuillaumeMontassier 0
Releases(v0.5.0)
Owner
Akihiko Kusanagi
Akihiko Kusanagi
Chart.js plugin to defer initial chart updates

Chart.js plugin to defer initial chart updates until the user scrolls and the canvas appears inside the viewport, and thus trigger the initial chart a

Chart.js 97 Nov 9, 2022
A Simple Dashboard Chart in Laravel Nova using Chart JS

A Simple Dashboard Chart in Laravel Nova using Chart JS. Starting create your own dashboard with Chart JS Integration can save your time and help you maintain consistency across standard elements such as Bar, Stacked, Line, Area, Doughnut and Pie Chart.

Kuncoro Wicaksono 177 Jan 4, 2023
Bar Funnel Chart extension for Chart.js

Chart.BarFunnel.js Provides a Bar Funnel Chart for use with Chart.js Documentation To create a Bar Funnel Chart, include Chart.BarFunnel.js after Char

Chart.js 58 Nov 24, 2022
TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies; use it with any framework or backend.

null 24 Dec 12, 2022
Zoom and pan plugin for Chart.js

chartjs-plugin-zoom A zoom and pan plugin for Chart.js >= 3.0.0 For Chart.js 2.6.0 to 2.9.x support, use version 0.7.7 of this plugin. Panning can be

Chart.js 510 Jan 2, 2023
Chart.js plugin for live streaming data

chartjs-plugin-streaming Chart.js plugin for live streaming data chartjs-plugin-streaming 2.x requires Chart.js 3.0.0 or later. If you need Chart.js 2

Akihiko Kusanagi 401 Dec 27, 2022
Chart.js plugin to create charts with a hand-drawn, sketchy, appearance

chartjs-plugin-rough Chart.js plugin to create charts with a hand-drawn, sketchy, appearance Version 0.2 requires Chart.js 2.7.0 or later, and Rough.j

Akihiko Kusanagi 73 Dec 1, 2022
Chart.js plugin to calculate and draw statistical linear, exponential, power, logarithmic, and polynomial regressions.

chartjs-plugin-regression Chart.js plugin to calculate and draw statistical linear, exponential, power, logarithmic, and polynomial regressions using

Wilfredo Pomier 14 Dec 18, 2022
Draggable data points plugin for Chart.js

chartjs-plugin-dragdata.js Now compatible with Chart.js v3 ?? Looking for a version compatible to Chart.js < 2.9.x? Then visit the v2 branch! A plugin

Christoph Pahmeyer 196 Dec 18, 2022
Chart.js plugin for Prometheus data loading

Welcome to chartjs-plugin-datasource-prometheus ?? A Prometheus datasource for ChartJS. Dependencies: requires chart.js 2.7 or later. requires moment.

Samuel Berthe 77 Dec 6, 2022
Chart.js plugin to display labels on data elements

Overview Highly customizable Chart.js plugin that displays labels on data for any type of charts. Requires Chart.js 3.x. Documentation Introduction Ge

Chart.js 753 Dec 24, 2022
Annotation plugin for Chart.js

chartjs-plugin-annotation.js An annotation plugin for Chart.js >= 3.0.0 This plugin needs to be registered. It does not function as inline plugin. For

Chart.js 515 Dec 30, 2022
Redefined chart library built with React and D3

Recharts Introduction Recharts is a Redefined chart library built with React and D3. The main purpose of this library is to help you to write charts i

recharts 19.4k Jan 2, 2023
:bar_chart: A D3-based reusable chart library

c3 c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications. Follow the link for more information: http

C3.js 9.2k Jan 2, 2023
GPL version of Javascript Gantt Chart

dhtmlxGantt Getting started | Features | Follow us | License | Useful links dhtmlxGantt is an open source JavaScript Gantt chart that helps you illust

null 952 Dec 29, 2022
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 2, 2023
:bar_chart: Re-usable, easy interface JavaScript chart library based on D3.js

billboard.js is a re-usable, easy interface JavaScript chart library, based on D3 v4+. The name "billboard" comes from the famous billboard chart whic

NAVER 5.4k Jan 1, 2023
:bar_chart: A library of modular chart components built on D3

Plottable Plottable is a library of chart components for creating flexible, custom charts for websites. It is built on top of D3.js and provides highe

Palantir Technologies 2.9k Dec 31, 2022
Chart image and QR code web API

QuickChart QuickChart is a service that generates images of charts from a URL. Because these charts are simple images, they are very easy to embed in

Ian Webster 1.3k Dec 25, 2022