chartjs-plugin-roughness
Version:
Make your chart.js roughness
115 lines (105 loc) • 2.86 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_COUNT = 5;
const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};
const labels = ['Red', 'Orange', 'Yellow', 'Green', 'Blue'];
const data = {
labels: labels,
datasets: [
{
label: 'Dataset 1',
data: Utils.numbers(NUMBER_CFG),
backgroundColor: [
Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
Utils.transparentize(Utils.CHART_COLORS.orange, 0.5),
Utils.transparentize(Utils.CHART_COLORS.yellow, 0.5),
Utils.transparentize(Utils.CHART_COLORS.green, 0.5),
Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
]
}
]
};
const config = {
type: 'polarArea',
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Polar Area Chart'
}
}
},
};
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>