Skip to content

Commit

Permalink
Bump version to 0.3.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@nagix
nagix committed Jul 23, 2018
1 parent 8b12296 commit bb61943
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 47 deletions.
32 changes: 27 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -46,20 +46,30 @@ 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.
| `pointShadowOffsetX` | `Number/Number[]` | 0 | The horizontal distance the shadow should extend from the point.
| `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.
| `pointHoverShadowOffsetX` | `Number/Number[]` | 0 | The horizontal distance the shadow should extend from the point when hovered.
| `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

Expand All @@ -72,13 +82,21 @@ 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.
| `hoverShadowOffsetX` | `Number/Number[]` | 0 | The horizontal distance the shadow should extend from the element when hovered.
| `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

Expand All @@ -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:

Expand All @@ -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: {
Expand Down
133 changes: 93 additions & 40 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
<meta name="twitter:site" content="@nagix" />
<meta name="theme-color" content="#ffffff">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script type="text/javascript" src="https://github.com/nagix/chartjs-plugin-style/releases/download/v0.2.0/chartjs-plugin-style.min.js"></script>
<script type="text/javascript" src="https://github.com/chartjs/chartjs-plugin-deferred/releases/download/v1.0.1/chartjs-plugin-deferred.js"></script>
<script type="text/javascript" src="https://github.com/nagix/chartjs-plugin-style/releases/download/v0.3.0/chartjs-plugin-style.min.js"></script>
</head>
<body>
<section id="hero-spot" class="hero-spot">
Expand Down Expand Up @@ -110,7 +111,7 @@ <h4>Add bevels</h4>

<li>
<h4>Add shadows</h4>
<p>You can also add drop shadows. Enable the glow effect when hovering.</p>
<p>You can also add drop shadows.</p>
<div class="terminal">
<div class="header"></div>
<div class="shell">
Expand All @@ -122,10 +123,6 @@ <h4>Add shadows</h4>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;shadowOffsetY: 3,</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;shadowBlur: 10,</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;shadowColor: 'rgba(0, 0, 0, 0.5)',</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hoverShadowOffsetX: 0,</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hoverShadowOffsetY: 0,</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hoverShadowBlur: 20,</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hoverShadowColor: 'rgba(255, 255, 0, 1)'</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;}]</p>
<p>&nbsp;&nbsp;},</p>
<p>&nbsp;&nbsp;options: {</p>
Expand All @@ -147,30 +144,56 @@ <h4>Add shadows</h4>
</p>
</li>

<li>
<h4>Add glows</h4>
<p>Enable the glow effect when hovering.</p>
<div class="terminal">
<div class="header"></div>
<div class="shell">
<p>&nbsp;&nbsp;data: {</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;...</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;datasets: [{</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hoverInnerGlowWidth: 20,</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hoverInnerGlowColor: 'rgb(255, 255, 0)',</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hoverOuterGlowWidth: 20,</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hoverOuterGlowWidth: 'rgb(255, 255, 0)'</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;}]</p>
<p>&nbsp;&nbsp;},</p>
<p>&nbsp;&nbsp;...</p>
</div>
</div>
<p>
<div style="width:580px; margin:auto;">
<canvas id="chart4"></canvas>
</div>
</p>
</li>

<li>
<h4>See a few other examples</h4>
<p>Line Chart</p>
<p>
<div style="width:580px; margin:auto;">
<canvas id="chart4"></canvas>
<canvas id="chart5"></canvas>
</div>
</p>
<p>Bubble Chart</p>
<p>
<div style="width:580px; margin:auto;">
<canvas id="chart5"></canvas>
<canvas id="chart6"></canvas>
</div>
</p>
<p>Doughnut Chart</p>
<p>
<div style="width:580px; margin:auto;">
<canvas id="chart6"></canvas>
<canvas id="chart7"></canvas>
</div>
</p>
<p>Radar Chart</p>
<p>
<div style="width:580px; margin:auto;">
<canvas id="chart7"></canvas>
<canvas id="chart8"></canvas>
</div>
</p>
</li>
Expand Down Expand Up @@ -247,11 +270,7 @@ <h4>...and you're done!</h4>
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: {
Expand All @@ -269,6 +288,41 @@ <h4>...and you're done!</h4>

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'],
Expand All @@ -290,11 +344,11 @@ <h4>...and you're done!</h4>
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: {
Expand All @@ -312,12 +366,11 @@ <h4>...and you're done!</h4>
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'],
Expand All @@ -335,10 +388,10 @@ <h4>...and you're done!</h4>
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: {
Expand All @@ -359,8 +412,8 @@ <h4>...and you're done!</h4>
}
});

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'],
Expand All @@ -382,10 +435,10 @@ <h4>...and you're done!</h4>
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: {
Expand All @@ -406,8 +459,8 @@ <h4>...and you're done!</h4>
}
});

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'],
Expand All @@ -428,11 +481,11 @@ <h4>...and you're done!</h4>
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: {
Expand Down
5 changes: 3 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down Expand Up @@ -32,8 +32,9 @@
"chart.js",
"plugin",
"style",
"bevel",
"shadow",
"bevel"
"glow"
],
"author": "Akihiko Kusanagi <[email protected]> (https://nagix.github.io/)",
"license": "MIT",
Expand Down

0 comments on commit bb61943

Please sign in to comment.