diff --git a/README.md b/README.md index 4e591dc..59bd344 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ chartjs-plugin-style can be used with ES6 modules, plain JavaScript and module l chartjs-plugin-style requires [Chart.js](https://www.chartjs.org). Include Chart.js and chartjs-plugin-style.js to your page to enable style options. -Version 0.2 supports the bevel and shadow effects for datasets and the tooltip. More options are to be added in the upcoming releases. +Version 0.3 supports the bevel, drop shadow, inner glow and outer glow effects for datasets and the tooltip. More options are to be added in the upcoming releases. ## Tutorial and Samples @@ -46,6 +46,8 @@ To configure this plugin, you can simply add the following properties to your da | `shadowOffsetY` | `Number` | 0 | Indicates the vertical distance the shadow should extend from the line. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetY). | `shadowBlur` | `Number` | 0 | Indicates the size of the blurring effect for the line; this value doesn't correspond to a number of pixels. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowBlur). | `shadowColor` | `Color` | `'rgba(0, 0, 0, 0)'` | A standard CSS color value indicating the color of the shadow effect for the line. See [Colors](http://www.chartjs.org/docs/latest/general/colors.html#colors). +| `outerGlowWidth` | `Number` | 0 | The width of the outer glow effect for the line. +| `outerGlowColor` | `Color` | `'rgba(0, 0, 0, 0)'` | The color of the outer glow effect for the line. | `pointBevelWidth` | `Number/Number[]` | `0` | The width of the bevel effect for the point. | `pointBevelHighlightColor` | `Color/Color[]` | `'rgba(0, 0, 0, 0)'` | The highlight color of the bevel effect for the point. | `pointBevelShadowColor` | `Color/Color[]` | `'rgba(0, 0, 0, 0)'` | The shadow color of the bevel effect for the point. @@ -53,6 +55,10 @@ To configure this plugin, you can simply add the following properties to your da | `pointShadowOffsetY` | `Number/Number[]` | 0 | The vertical distance the shadow should extend from the point. | `pointShadowBlur` | `Number/Number[]` | 0 | The size of the blurring effect for the point. | `pointShadowColor` | `Color/Color[]` | `'rgba(0, 0, 0, 0)'` | The color of the shadow effect for the point. +| `pointInnerGlowWidth` | `Number/Number[]` | 0 | The width of the inner glow effect for the point. +| `pointInnerGlowColor` | `Color/Color[]` | `'rgba(0, 0, 0, 0)'` | The color of the inner glow effect for the point. +| `pointOuterGlowWidth` | `Number/Number[]` | 0 | The width of the outer glow effect for the point. +| `pointOuterGlowColor` | `Color/Color[]` | `'rgba(0, 0, 0, 0)'` | The color of the outer glow effect for the point. | `pointHoverBevelWidth` | `Number/Number[]` | `0` | The width of the bevel effect for the point when hovered. | `pointHoverBevelHighlightColor` | `Color/Color[]` | `'rgba(0, 0, 0, 0)'` | The highlight color of the bevel effect for the point when hovered. | `pointHoverBevelShadowColor` | `Color/Color[]` | `'rgba(0, 0, 0, 0)'` | The shadow color of the bevel effect for the point when hovered. @@ -60,6 +66,10 @@ To configure this plugin, you can simply add the following properties to your da | `pointHoverShadowOffsetY` | `Number/Number[]` | 0 | The vertical distance the shadow should extend from the point when hovered. | `pointHoverShadowBlur` | `Number/Number[]` | 0 | The size of the blurring effect for the point when hovered. | `pointHoverShadowColor` | `Color/Color[]` | `'rgba(0, 0, 0, 0)'` | The color of the shadow effect for the point when hovered. +| `pointHoverInnerGlowWidth` | `Number/Number[]` | 0 | The width of the inner glow effect for the point when hovered. +| `pointHoverInnerGlowColor` | `Color/Color[]` | `'rgba(0, 0, 0, 0)'` | The color of the inner glow effect for the point when hovered. +| `pointHoverOuterGlowWidth` | `Number/Number[]` | 0 | The width of the outer glow effect for the point when hovered. +| `pointHoverOuterGlowColor` | `Color/Color[]` | `'rgba(0, 0, 0, 0)'` | The color of the outer glow effect for the point when hovered. ### Bar, Doughnut, Pie, Polar Area and Bubble @@ -72,6 +82,10 @@ To configure this plugin, you can simply add the following properties to your da | `shadowOffsetY` | `Number/Number[]` | 0 | Indicates the vertical distance the shadow should extend from the element. | `shadowBlur` | `Number/Number[]` | 0 | Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels. | `shadowColor` | `Color/Color[]` | `'rgba(0, 0, 0, 0)'` | A standard CSS color value indicating the color of the shadow effect. +| `innerGlowWidth` | `Number/Number[]` | 0 | The width of the inner glow effect. +| `innerGlowColor` | `Color/Color[]` | `'rgba(0, 0, 0, 0)'` | The color of the inner glow effect. +| `outerGlowWidth` | `Number/Number[]` | 0 | The width of the outer glow effect. +| `outerGlowColor` | `Color/Color[]` | `'rgba(0, 0, 0, 0)'` | The color of the outer glow effect. | `hoverBevelWidth` | `Number/Number[]` | `0` | The width of the bevel effect when hovered. | `hoverBevelHighlightColor` | `Color/Color[]` | `'rgba(0, 0, 0, 0)'` | The highlight color of the bevel effect when hovered. | `hoverBevelShadowColor` | `Color/Color[]` | `'rgba(0, 0, 0, 0)'` | The shadow color of the bevel effect when hovered. @@ -79,6 +93,10 @@ To configure this plugin, you can simply add the following properties to your da | `hoverShadowOffsetY` | `Number/Number[]` | 0 | The vertical distance the shadow should extend from the element when hovered. | `hoverShadowBlur` | `Number/Number[]` | 0 | The size of the blurring effect when hovered. | `hoverShadowColor` | `Color/Color[]` | `'rgba(0, 0, 0, 0)'` | The color of the shadow effect when hovered. +| `hoverInnerGlowWidth` | `Number/Number[]` | 0 | The width of the inner glow effect when hovered. +| `hoverInnerGlowColor` | `Color/Color[]` | `'rgba(0, 0, 0, 0)'` | The color of the inner glow effect when hovered. +| `hoverOuterGlowWidth` | `Number/Number[]` | 0 | The width of the outer glow effect when hovered. +| `hoverOuterGlowColor` | `Color/Color[]` | `'rgba(0, 0, 0, 0)'` | The color of the outer glow effect when hovered. ### Tooltip @@ -91,6 +109,10 @@ To configure this plugin, you can simply add the following properties to your da | `shadowOffsetY` | `Number` | 0 | Indicates the vertical distance the shadow should extend from the tooltip. | `shadowBlur` | `Number` | 0 | Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels. | `shadowColor` | `Color` | `'rgba(0, 0, 0, 0)'` | A standard CSS color value indicating the color of the shadow effect. +| `innerGlowWidth` | `Number` | 0 | The width of the inner glow effect. +| `innerGlowColor` | `Color` | `'rgba(0, 0, 0, 0)'` | The color of the inner glow effect. +| `outerGlowWidth` | `Number` | 0 | The width of the outer glow effect. +| `outerGlowColor` | `Color` | `'rgba(0, 0, 0, 0)'` | The color of the outer glow effect. For example: @@ -112,10 +134,10 @@ For example: pointShadowOffsetY: 3, pointShadowBlur: 10, pointShadowColor: 'rgba(0, 0, 0, 0.5)', - pointHoverShadowOffsetX: 0, - pointHoverShadowOffsetY: 0, - pointHoverShadowBlur: 20, - pointHoverShadowColor: 'rgba(255, 255, 0, 1)' + pointHoverInnerGlowWidth: 20, + pointHoverInnerGlowColor: 'rgba(255, 255, 0, 0.5)', + pointHoverOuterGlowWidth: 20, + pointHoverOuterGlowColor: 'rgba(255, 255, 0, 1)' }] }, options: { diff --git a/docs/index.html b/docs/index.html index 9f6db45..683a219 100644 --- a/docs/index.html +++ b/docs/index.html @@ -14,7 +14,8 @@ - + +
@@ -110,7 +111,7 @@

Add bevels

  • Add shadows

    -

    You can also add drop shadows. Enable the glow effect when hovering.

    +

    You can also add drop shadows.

    @@ -122,10 +123,6 @@

    Add shadows

          shadowOffsetY: 3,

          shadowBlur: 10,

          shadowColor: 'rgba(0, 0, 0, 0.5)',

    -

          hoverShadowOffsetX: 0,

    -

          hoverShadowOffsetY: 0,

    -

          hoverShadowBlur: 20,

    -

          hoverShadowColor: 'rgba(255, 255, 0, 1)'

        }]

      },

      options: {

    @@ -147,30 +144,56 @@

    Add shadows

    • +
  • +

    Add glows

    +

    Enable the glow effect when hovering.

    +
    +
    +
    +

      data: {

    +

        ...

    +

        datasets: [{

    +

          ...

    +

          hoverInnerGlowWidth: 20,

    +

          hoverInnerGlowColor: 'rgb(255, 255, 0)',

    +

          hoverOuterGlowWidth: 20,

    +

          hoverOuterGlowWidth: 'rgb(255, 255, 0)'

    +

        }]

    +

      },

    +

      ...

    +
    +
    +

    +

    + +
    +

    +
    • +

  • See a few other examples

    Line Chart

    - +

    Bubble Chart

    - +

    Doughnut Chart

    - +

    Radar Chart

    - +

    • @@ -247,11 +270,7 @@

    ...and you're done!

    shadowColor: 'rgba(0, 0, 0, 0.5)', bevelWidth: 3, bevelHighlightColor: 'rgba(255, 255, 255, 0.75)', - bevelShadowColor: 'rgba(0, 0, 0, 0.5)', - hoverShadowOffsetX: 0, - hoverShadowOffsetY: 0, - hoverShadowBlur: 20, - hoverShadowColor: 'rgba(255, 255, 0, 1)' + bevelShadowColor: 'rgba(0, 0, 0, 0.5)' }] }, options: { @@ -269,6 +288,41 @@

    ...and you're done!

    var ctx4 = document.getElementById('chart4').getContext('2d'); var chart4 = new Chart(ctx4, { + type: 'bar', + data: { + labels: ['January', 'February', 'March', 'April', 'May', 'June'], + datasets: [{ + data: [45, 20, 64, 32, 76, 51], + borderColor: 'rgba(0, 0, 0, 0)', + backgroundColor: 'rgb(255, 99, 132)', + shadowOffsetX: 3, + shadowOffsetY: 3, + shadowBlur: 10, + shadowColor: 'rgba(0, 0, 0, 0.5)', + bevelWidth: 3, + bevelHighlightColor: 'rgba(255, 255, 255, 0.75)', + bevelShadowColor: 'rgba(0, 0, 0, 0.5)', + hoverInnerGlowWidth: 20, + hoverInnerGlowColor: 'rgb(255, 255, 0)', + hoverOuterGlowWidth: 20, + hoverOuterGlowColor: 'rgb(255, 255, 0)' + }] + }, + options: { + tooltips: { + shadowOffsetX: 3, + shadowOffsetY: 3, + shadowBlur: 10, + shadowColor: 'rgba(0, 0, 0, 0.5)', + bevelWidth: 3, + bevelHighlightColor: 'rgba(255, 255, 255, 0.75)', + bevelShadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + }); + + var ctx5 = document.getElementById('chart5').getContext('2d'); + var chart5 = new Chart(ctx5, { type: 'bar', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June'], @@ -290,11 +344,11 @@

    ...and you're done!

    pointBevelHighlightColor: 'rgba(255, 255, 255, 0.75)', pointBevelShadowColor: 'rgba(0, 0, 0, 0.5)', pointHoverRadius: 6, - pointHoverShadowOffsetX: 0, - pointHoverShadowOffsetY: 0, - pointHoverShadowBlur: 20, - pointHoverShadowColor: 'rgba(255, 255, 0, 1)', - pointHoverBevelWidth: 4.5 + pointHoverBevelWidth: 4.5, + pointHoverInnerGlowWidth: 20, + pointHoverInnerGlowColor: 'rgba(255, 255, 0, 0.5)', + pointHoverOuterGlowWidth: 20, + pointHoverOuterGlowColor: 'rgb(255, 255, 0)' }] }, options: { @@ -312,12 +366,11 @@

    ...and you're done!

    usePointStyle: true } } - } }); - var ctx5 = document.getElementById('chart5').getContext('2d'); - var chart5 = new Chart(ctx5, { + var ctx6 = document.getElementById('chart6').getContext('2d'); + var chart6 = new Chart(ctx6, { type: 'bar', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June'], @@ -335,10 +388,10 @@

    ...and you're done!

    bevelWidth: 3, bevelHighlightColor: 'rgba(255, 255, 255, 0.75)', bevelShadowColor: 'rgba(0, 0, 0, 0.5)', - hoverShadowOffsetX: 0, - hoverShadowOffsetY: 0, - hoverShadowBlur: 20, - hoverShadowColor: 'rgba(255, 255, 0, 1)' + hoverInnerGlowWidth: 20, + hoverInnerGlowColor: 'rgb(255, 255, 0)', + hoverOuterGlowWidth: 20, + hoverOuterGlowColor: 'rgb(255, 255, 0)' }] }, options: { @@ -359,8 +412,8 @@

    ...and you're done!

    } }); - var ctx6 = document.getElementById('chart6').getContext('2d'); - var chart6 = new Chart(ctx6, { + var ctx7 = document.getElementById('chart7').getContext('2d'); + var chart7 = new Chart(ctx7, { type: 'doughnut', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June'], @@ -382,10 +435,10 @@

    ...and you're done!

    bevelWidth: 3, bevelHighlightColor: 'rgba(255, 255, 255, 0.75)', bevelShadowColor: 'rgba(0, 0, 0, 0.5)', - hoverShadowOffsetX: 0, - hoverShadowOffsetY: 0, - hoverShadowBlur: 20, - hoverShadowColor: 'rgba(255, 255, 0, 1)' + hoverInnerGlowWidth: 20, + hoverInnerGlowColor: 'rgb(255, 255, 0)', + hoverOuterGlowWidth: 20, + hoverOuterGlowColor: 'rgb(255, 255, 0)' }] }, options: { @@ -406,8 +459,8 @@

    ...and you're done!

    } }); - var ctx7 = document.getElementById('chart7').getContext('2d'); - var chart7 = new Chart(ctx7, { + var ctx8 = document.getElementById('chart8').getContext('2d'); + var chart8 = new Chart(ctx8, { type: 'radar', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June'], @@ -428,11 +481,11 @@

    ...and you're done!

    pointBevelHighlightColor: 'rgba(255, 255, 255, 0.75)', pointBevelShadowColor: 'rgba(0, 0, 0, 0.5)', pointHoverRadius: 6, - pointHoverShadowOffsetX: 0, - pointHoverShadowOffsetY: 0, - pointHoverShadowBlur: 20, - pointHoverShadowColor: 'rgba(255, 255, 0, 1)', - pointHoverBevelWidth: 4.5 + pointHoverBevelWidth: 4.5, + pointHoverInnerGlowWidth: 20, + pointHoverInnerGlowColor: 'rgba(255, 255, 0, 0.5)', + pointHoverOuterGlowWidth: 20, + pointHoverOuterGlowColor: 'rgb(255, 255, 0)' }] }, options: { diff --git a/package.json b/package.json index e063af0..0730e4c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "chartjs-plugin-style", - "version": "0.2.0", + "version": "0.3.0", "description": "Chart.js plugin for more styling options", "main": "dist/chartjs-plugin-style.js", "directories": { @@ -32,8 +32,9 @@ "chart.js", "plugin", "style", + "bevel", "shadow", - "bevel" + "glow" ], "author": "Akihiko Kusanagi (https://nagix.github.io/)", "license": "MIT",