Manipulate ZoomChart charts from DOM

103 Views Asked by At

In a website ZoomCharts are integrated and I want to mask the prices in the chart like $99 to $xxx via content script of chrome extension. But I could not find any numerical value on the chart in the DOM

Chart

1

There are 1 best solutions below

0
jancha On BEST ANSWER

ZoomCharts is using Canvas to render the chart. To change the label content, you can use styleFunction like this: http://jsfiddle.net/7np69cLo/

however, note that you need to access the chart instance to change the behaviour.

to do that from external script for a chart that is already instantiated, you can do it like this:

let e = document.getElementById("demo"); // set to dom element that contains the chart
let chart = e._DVSL_ChartInstance; // get the chart instance
chart.updateSettings({
    slice: {
        styleFunction: function(slice){
            slice.label = "foo";
            slice.innerLabel = "bar";
        }
    }
}); // set your own style function as in the above jsfiddle example