No zoom using script tags

[citron]

I use HTML script tag to import TimeChart but I am unable to enable the zoom feature.
<script src="https://huww98.github.io/TimeChart/dist/timechart.min.js"></script>

Am I missing something ?

const chart = new TimeChart(el, {
  series: [{ data }],
  plugins: {
    lineChart: TimeChart.plugins.lineChart,
    d3Axis: TimeChart.plugins.d3Axis,
    legend: TimeChart.plugins.legend,
    crosshair: TimeChart.plugins.crosshair,
    nearestPoint: TimeChart.plugins.nearestPoint,
    zoom: new TimeChart.plugins.TimeChartZoomPlugin({x: {autoRange: true}, y: {autoRange: true}}),
    tooltip: TimeChart.plugins.tooltip,
  },
});

I get a wonderful and fast chart with crosshair but no zoom.
Either the doc is incomplete, the implementation is broken or I am dumb ( which may be true in all cases ).
Can you please share an example or fix the code?

[huww98]

Hi, please try replace new TimeChart with new TimeChart.core.

Please refer to the README：

For users who use HTML script tag to import TimeChart, use this instead:
...

[citron]

nope. Doesn't work :(

[huww98]

No idea why.

diff --git a/demo/plugins/assemble.html b/demo/plugins/assemble.html
index 1d34a14..208a7f6 100644
--- a/demo/plugins/assemble.html
+++ b/demo/plugins/assemble.html
@@ -28,6 +28,7 @@
             series: [{ data, name: 'Random' }],
             plugins: {
                 lineChart: TimeChart.plugins.lineChart,
+                zoom: new TimeChart.plugins.TimeChartZoomPlugin({x: { autoRange: true }, y: { autoRange: true }}),
             }
         });
     </script>

Apply this patch and you will get a working example at demo/plugins/assemble.html. I've just tried this locally.

BTW, to zoom the chart, you need to hold the ctrl key and scroll the mouse wheel.

[citron]

I am dumb.
The problem is that I forgot "core" in const chart = new TimeChart.core(...
Thanks.