<!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!");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.