Search code examples
javascriptgoogle-chromedomchartszoomcharts

Manipulate ZoomChart charts from DOM


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


Solution

  • 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