Update Marker Size on Zooming - CanvasJS Javascript Charts
Update Marker Size on Zooming - CanvasJS Javascript Charts
by canvasjs
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled: true,
rangeChanged: setMarkerSize,
title: {
text: "Setting Marker Size on Zooming"
},
data: [
{
type: "spline",
dataPoints: [
{ x: new Date(2018,9, 1), y: 43 },
{ x: new Date(2018,9, 2), y: 56 },
{ x: new Date(2018,9, 3), y: 23 },
{ x: new Date(2018,9, 4), y: 12 },
{ x: new Date(2018,9, 5), y: 34 },
{ x: new Date(2018,9, 6), y: 43 },
{ x: new Date(2018,9, 7), y: 56 },
{ x: new Date(2018,9, 8), y: 23 },
{ x: new Date(2018,9, 9), y: 12 },
{ x: new Date(2018,9,10), y: 45 },
{ x: new Date(2018,9,11), y: 34 },
{ x: new Date(2018,9,12), y: 23 },
{ x: new Date(2018,9,13), y: 45 },
{ x: new Date(2018,9,14), y: 76 },
{ x: new Date(2018,9,15), y: 85 },
{ x: new Date(2018,9,16), y: 46 },
{ x: new Date(2018,9,17), y: 22 },
{ x: new Date(2018,9,18), y: 45 },
{ x: new Date(2018,9,19), y: 98 },
{ x: new Date(2018,9,20), y: 45 },
{ x: new Date(2018,9,21), y: 35 },
{ x: new Date(2018,9,22), y: 22 },
{ x: new Date(2018,9,23), y: 11 },
{ x: new Date(2018,9,24), y: 56 },
{ x: new Date(2018,9,25), y: 76 },
{ x: new Date(2018,9,26), y: 34 },
{ x: new Date(2018,9,27), y: 45 },
{ x: new Date(2018,9,28), y: 68 },
{ x: new Date(2018,9,29), y: 45 },
{ x: new Date(2018,9,30), y: 89 },
{ x: new Date(2018,10, 1), y: 43 },
{ x: new Date(2018,10, 2), y: 56 },
{ x: new Date(2018,10, 3), y: 23 },
{ x: new Date(2018,10, 4), y: 12 },
{ x: new Date(2018,10, 5), y: 34 },
{ x: new Date(2018,10, 6), y: 43 },
{ x: new Date(2018,10, 7), y: 56 },
{ x: new Date(2018,10, 8), y: 23 },
{ x: new Date(2018,10, 9), y: 12 },
{ x: new Date(2018,10,10), y: 45 },
{ x: new Date(2018,10,11), y: 34 },
...