<!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"> var pod = new ChartwerkBarPod( document.getElementById('chart'), [ { target: 'test11', datapoints: getData(), matchedKey: 'm-1', color: 'red', colorFormatter: (data) => ['green', 'yellow'][data.rowIndex] }, // { target: 'test12', datapoints: [[100, 10], [200, 20], [300, 10]], matchedKey: 'm-1', color: 'green' }, // { target: 'test21', datapoints: [[130, 10], [230, 26], [330, 15]], matchedKey: 'm-2', color: 'yellow'}, // { target: 'test22', datapoints: [[130, 10], [230, 27], [330, 10]], matchedKey: 'm-2', color: 'blue' }, ], { usePanning: false, axis: { x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; } }, y: { format: 'custom', invert: false, range: [0, 30], valueFormatter: (value) => { return value + '%'; } } }, stacked: false, matching: false, zoomEvents: { scroll: { zoom: { isActive: false }, pan: { isActive: false } }, }, annotations: [ { key: 'm-1', color: 'red' }, { key: 'm-2', color: 'green' } ], eventsCallbacks: { zoomIn: (range) => { console.log('range', range) } }, renderLegend: false, } ); console.time('render'); pod.render(); console.timeEnd('render'); function getData() { return [ [0, 15], [1, 20], [2, 10], ]; } </script> </body> </html> <style> .overlay { fill: black; } </style>