Crosshair feature of Zing Chart is leak CPU

When I enable the crosshair feature in my chart, everything works OK in Chrome 56, but when I upgraded Chrome to 57 (even chrome 58 and ZingChart 2.6.0 now), The CPU usage is always above 25% when hovering the chart such as to see a crosshair. When I have 2 charts, CPU usage goes up to 99% and the browser slows and crashes soon after.

I tried disabling all features to see what was the cause of this issue, and when I disable the crosshair, CPU usage is normal again. And if I disable everything but the crosshair feature, the same CPU hogging effect is observed.

The only way to free the resources is by terminating the tab.

Here is my code:

var dataChart = {
  id: "ShSDbePYhAxC",
  data: {
    type: "area",
    "crosshair-x": {
      "plot-label": {
        text: "The %t Series has a value of %v."
      }
    },
    gui: {
      behaviors: [
        {
          id: "Reload",
          enabled: "none"
        }
      ],
      contextMenu: {
        customItems: [
          {
            function: "zingAlert()",
            id: "zingAlert",
            text: "zing Alert"
          }
        ]
      }
    },
    item: {
      angle: -30
    },
    legend: {
      "background-color": "white",
      "border-color": "black",
      "border-radius": "5px",
      "border-width": 2,
      layout: "1xauto",
      padding: "10%",
      x: "12%",
      y: "90%"
    },
    plot: {
      alphaArea: 1,
      aspect: "spline",
      "bar-width": "15px",
      "contour-on-top": false,
      lineWidth: "2px",
      stacked: true,
      marker: {
        visible: false
      },
      tooltip: {
        visible: false
      }
    },
    plotarea: {
      "margin-bottom": "23%",
      "margin-left": "dynamic"
    },
    "scale-x": {
      item: {
        angle: -30
      },
      labels: [
        "Name0", "Name1", "Name2", "Name3", "Name4"
      ]
    },
    "scale-y": {
      label: {
        "font-size": "15%",
        text: "Number Of Visitors"
      }
    },
    series: [
      {
        text: "Text A",
        values: [11111, 222222, 3333333, 444444, 55555]
      },
      {
        text: "Text B",
        values: [6666, 777777, 88888, 99999, 12121212]
      }
    ]
  },
  height: 550,
  output: "canvas",
  width: "100%",
}

Solution

So we have been leaning to believe this may be a chrome and Angular issue. To confirm this can you revert your zingchart version to an older version like v2.2.2. You can reach this version through the cdn at the following links

Root directory: http://cdn.zingchart.com/2.2.2/

ZingChart.min: http://cdn.zingchart.com/2.2.2/zingchart.min.js

Modules: http://cdn.zingchart.com/2.2.2/modules/

If the problem still happens its a browser and Angular issue and we know where to focus our efforts. If the problem goes away it's directly a ZingChart issue.