How to enable the zooming option in OlapChart inside the JavaScript Pivot Chart?

You can enable zooming option in the OlapChart, stand-alone widget, and the OlapChart in the OlapClient by using the zooming property in JavaScript PivotChart. This property has three child properties, namely,

1. enable as Boolean.
2. type as string.
3. enableMouseWheel as Boolean.

enable: Enables the zooming option when set to true.

type: Enables the zooming option over the desired axis. Possible values are X, Y, and XY.

enableMouseWheel: Scrolls the Chart image by using the mouse wheel in panning state.

Initially, after zooming the Chart image, you can see three icons at the top-right hand side of the Chart. The first icon is selected, by default that shows the Chart zoomed. In the zoomed state, you cannot scroll the Chart. On scrolling with the cursor, the image gets zoomed even bigger. The second icon is the panning state, where you can scroll the Chart. The third icon resets the Chart to the normal state after zooming.

The following code example illustrates how to enable zooming option in the OlapChart’s, stand-alone widget.

JavaScript

$("#OlapChart").ejOlapChart({ url: "../wcf/OlapChartService.svc", zooming: {enable : true, type : 'x,y', enableMouseWheel: true }});

The following code example illustrates how to enable zooming option in the OlapChart in the OlapClient.

JavaScript

$(function () {
$("#OlapClient").ejOlapClient({ url: "../wcf/OlapClientService.svc", title: "OLAP Browser",   chartLoad: "setChartProperties"});
});
function setChartProperties(args) {
   this.model.zooming= {enable : true, type : 'x,y', enableMouseWheel: true } ;
   this.model.load = "loadTheme";
   this.model.legend.rowCount = 2;
   this.model.primaryXAxis = { title: { text: "Fiscal Year" }, labelRotation: 270 };
   this.model.primaryYAxis = { title: { text: "Customer Count" } };}

Conclusion

I hope you enjoyed learning about how to enable the zooming option in OlapChart (stand-alone widget) and OlapChart inside the JavaScript Pivot Chart.

You can refer to our JavaScript PivotChart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript PivotChart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!