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:
- to put html in the tooltip, just add htmlMode : true on the tooltip
- 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.