chartjs-plugin-roughness
Version:
Make your chart.js roughness
106 lines (97 loc) • 2.61 kB
HTML
<html lang="en">
<body>
<div style="width: 640px; height: 480px">
<canvas id="canvas"></canvas>
</div>
<script type="module" src="/index.js"></script>
<script type="module">
import * as Utils from '../utils'
import {initChartAndActions} from "../utils.js";
const data = {
labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
datasets: [
{
label: 'Dataset',
data: Utils.numbers({count: 6, min: -100, max: 100}),
borderColor: Utils.CHART_COLORS.red,
backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
pointStyle: 'circle',
pointRadius: 10,
pointHoverRadius: 15
}
]
};
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
title: {
display: true,
text: (ctx) => 'Point Style: ' + ctx.chart.data.datasets[0].pointStyle,
}
}
}
};
const actions = [
{
name: 'Randomize',
handler(chart) {
chart.data.datasets.forEach(dataset => {
dataset.data = Utils.numbers({count: chart.data.labels.length, min: -100, max: 100});
});
chart.update();
}
},
{
name: 'Add Dataset',
handler(chart) {
const data = chart.data;
const dsColor = Utils.namedColor(chart.data.datasets.length);
const newDataset = {
label: 'Dataset ' + (data.datasets.length + 1),
backgroundColor: Utils.transparentize(dsColor, 0.5),
borderColor: dsColor,
data: Utils.numbers({count: data.labels.length, min: -100, max: 100}),
};
chart.data.datasets.push(newDataset);
chart.update();
}
},
{
name: 'Add Data',
handler(chart) {
const data = chart.data;
if (data.datasets.length > 0) {
data.labels = Utils.months({count: data.labels.length + 1});
for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.rand(-100, 100));
}
chart.update();
}
}
},
{
name: 'Remove Dataset',
handler(chart) {
chart.data.datasets.pop();
chart.update();
}
},
{
name: 'Remove Data',
handler(chart) {
chart.data.labels.splice(-1, 1); // remove the label first
chart.data.datasets.forEach(dataset => {
dataset.data.pop();
});
chart.update();
}
}
];
initChartAndActions(actions, config);
</script>
</body>
</html>