<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vizzu Chart with Annotations</title>
</head>
<body>
<div id="vizzu-container" style="width:500px; height:350px; margin: auto;"></div>
<script src="./index.js" type="module"></script>
</body>
</html>
import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@latest/dist/vizzu.min.js';
import 'https://cdn.jsdelivr.net/npm/markerjs2@2.29.0/markerjs2.min.js'
let data = {
series: [
{ name: 'Foo', values: ['Alice', 'Bob', 'Ted'] },
{ name: 'Bar', values: [15, 32, 12] }
]
};
let chart = new Vizzu('vizzu-container', { data });
let animating = chart.animate({
x: 'Foo',
y: 'Bar'
});
let markerArea = new markerjs2.MarkerArea(document.getElementById('vizzu-container'));
markerArea.show();
markerArea.addEventListener('render', event => {
navigator.clipboard.writeText(JSON.stringify(event.state));
alert("Annotation JSON object copied to clipboard!");
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.