chartjs-plugin-roughness
Version:
Make your chart.js roughness
144 lines (134 loc) • 3.41 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 = 7;
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
const labels = Utils.months({count: DATA_COUNT});
const data = {
labels: labels,
datasets: [
{
label: 'Unfilled',
fill: false,
borderWidth: 1,
backgroundColor: Utils.CHART_COLORS.blue,
borderColor: Utils.CHART_COLORS.blue,
data: Utils.numbers(NUMBER_CFG),
}, {
label: 'Dashed',
fill: false,
backgroundColor: Utils.CHART_COLORS.green,
borderWidth: 1,
borderColor: Utils.CHART_COLORS.green,
borderDash: [5, 5],
data: Utils.numbers(NUMBER_CFG),
}, {
label: 'Filled',
borderWidth: 1,
backgroundColor: Utils.CHART_COLORS.red,
borderColor: Utils.CHART_COLORS.red,
data: Utils.numbers(NUMBER_CFG),
fill: true,
}
]
};
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Chart.js Line Chart'
},
},
interaction: {
mode: 'index',
intersect: false
},
scales: {
x: {
display: true,
title: {
display: true,
text: 'Month'
}
},
y: {
display: true,
title: {
display: true,
text: 'Value'
}
}
}
},
};
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>