Chartwerk Bar Pod
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

58 lines
1.7 KiB

<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="../dist/index.dev.js" type="text/javascript"></script>
</head>
<body>
<div id="chart" style="width: 50%; height: 500px;"></div>
<script type="text/javascript">
// use formatters for color and opacity
const colorFormatter = (event) => (event.value > 50 ? 'red' : 'green');
const opacityFormatter = (event) => (event.key >= 200 ? 0.5 : 1);
var pod = new ChartwerkBarPod(
document.getElementById('chart'),
[
{ target: 'serie1', datapoints: [[0, 50], [100, 70], [200, 40], [300, 90]], color: colorFormatter, opacity: opacityFormatter },
],
{
usePanning: false,
axis: {
x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; }, ticksCount: 6 },
y: { format: 'custom', invert: false, valueFormatter: (value) => { return value + '%'; }, ticksCount: 8 }
},
zoomEvents: {
scroll: { zoom: { isActive: false }, pan: { isActive: false } },
},
eventsCallbacks: {
zoomIn: (range) => { console.log('range', range) }
},
renderLegend: false,
type: {
discrete: {
enable: true,
step: 100,
groupSize: {
width: { value: 60, type: 'percent', }
}
}
}
}
);
console.time('render');
pod.render();
console.timeEnd('render');
</script>
</body>
</html>
<style>
.overlay {
fill: none;
}
</style>