ZoomEnabled parameter on StockChart with nav bar

[ColibriSan]

Hi everybody,
i’m trying to add the zooming feature on the chart i’m developing.

I succeeded, but when zoomEnabled is TRUE i get the 2 buttons (reset and zoom switch) directly on the chart area instead next to the chart title.
In this way there’s a part of chart hidden by those two buttons.

I’ve set the zoomEnabled property on the “chart” sections:

charts: [{
zoomEnabled: true,
zoomType: “x”,
axisX: {
crosshair: {
enabled: true,
snapToDataPoint: true,
valueFormatString: “DD MMM YYYY”
},
labelFormatter: function (e) {
return CanvasJS.formatDate( e.value, “DD MMM”);
},
labelAngle: -20
},
axisY: {
prefix: “”,
suffix: “”,
gridThickness: 1,
gridColor: “#e6e6e6”,
crosshair: {
enabled: true,
snapToDataPoint: true,
valueFormatString: “#,###.000000”,
}
},

because placing everywhere else, the zoom feature doesn’t work.

Have you some tip for me?

[ColibriSan]

Here is the JSFiddle, as you can see the two buttons in top right corner sits on the chart area.

Moreover, those buttons are ALWAYS visible, not only when someone zoom data

https://jsfiddle.net/ColibriSan/zapLw304/

[Adithya Menon]

@colibrisan,

You can hide the zoom / reset toolbar by changing CSS display property to block or none based on some conditions as shown in the code snippet below,

if(e.trigger === "reset" || (e.source == "buttons" && e.index == 3) || (e.source === "navigator" && e.minimum <= minimum && e.maximum >= maximum)) { //condition check for reset button on toolbar
    document.getElementsByClassName("canvasjs-chart-toolbar")[2].style.display = "none";
  }
  else if((e.trigger ==="zoom" || e.trigger === "pan") || e.source === "buttons" || (e.source === "navigator" && e.minimum >= minimum && e.maximum <= maximum)) {
    document.getElementsByClassName("canvasjs-chart-toolbar")[2].style.display = "block";
  }

Kindly take a look at this updated JSFiddle for an example on the same.

—
Adithya Menon
Team CanvasJS

[ColibriSan]

Thanks, and what about the possibility to show the 2 buttons not on the chart area (when i have a spike in the chart, it goes behind the 2 buttons) but next (for examples) to the range selectors?
Is there a way to move them off the chart area?

[Adithya Menon]

@colibrisan,

You can customize the position of zoom / pan button by changing the CSS of the ‘canvasjs-chart-toolbar’ class as shown in the code snippet below,

.canvasjs-chart-toolbar {
  display: none;
  position: absolute !important;
  top: -34px !important;
  left: 0 !important;
  right: auto !important;
  margin-left: 157px !important;
}

Please take a look at this JSFiddle for an example where zoom / pan buttons are positioned above the chart plot area (near the range selector buttons).

—
Adithya Menon
Team CanvasJS