Customizing Depth Chart

Problem:
I am trying to build a bespoke tool-tip for the ZingChart "depth" chart. However, all the options I try have no effect. If I change the chart type to "scatter" then they work. Is it possible to customize the depth chart tool-tip ideally HTML but even text is not working?" I can't find a specific depth chart customizing page. The only option I see (which works) is pallete.

So I want to customize two things:

1) Tool-tip (to be HTML ideally as we have more data in there than the default)
2) Cross-hair - styling to be like design


Solution:
The tool-tip is disabled by default in a depth chart. If you add a maxTrackers property and set it to a value like 99999 i.e. "maxTrackers":99999, the tool-tip will show. Please use this demo for reference. The depth chart is really a specific one so it has built-in defaults and functionalities. However, you can apply some customization:

  1. to put html in the tooltip, just add htmlMode : true on the tooltip
  2. to customize the crosshair labels you need to use zingchart.plugins.depth.crosshairX_plotLabel_jsRule and return your own format of the object.

I've attached a demo for your reference.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us