Paste this at the end of the head element, right before
</head>:
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://c-lake.github.io/csv-charts/js/chartjs-plugin-colorschemes.min.js"></script>
<!-- Color scheme script from https://nagix.github.io/chartjs-plugin-colorschemes by Akihiko Kusanagi -->
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.7"></script>
You only need to do this once for each webpage even if you have multiple charts.
Paste this at the location where you want to insert the chart in the body element:
<canvas id="csv-chart-{{ chartId }}"></canvas>
<script>
// Generated with csv-charts at https://c-lake.github.io/csv-charts
let ctx{{ chartId }} = document.getElementById('csv-chart-{{ chartId }}').getContext('2d');
let csvChart{{ chartId }} = new Chart(ctx{{ chartId }}, {{ html }});
</script>
The exported chart will also have horizontal and vertical zoom enabled.