Pinpoint Chart Data with Crosshair Guides

by ZingChart Team

Many of our users have shown interest in our "guide" feature that allows chart viewers to hover over areas of a visualization and see what series values are available for a given x-axis node. The guide feature is a great one since it doesn't require end users to hover over exact nodes to trigger tooltips, and it allows for viewing more than one tooltip at a time for comparing series values.

Well, we recently took our guides one step further and gave them a new name in the process. These hover-guides are to be called "crosshair-x": and "crosshair-y": and are new objects within the "graphset":. They're customizable, and they are awesome. Give them a try:

Crosshair Guides: Details

NOTE: If you ever want to dig deeper into the JSON that drives one of our charts, just right click on it and select View Source.

The crosshair-x and crosshair-y features are fully customizable, from the lines to the tooltips ("value-label":) to the labels for scale-x and scale-y ("scale-label":). Here's some sample code to try out to get you started:

(the following goes within "graphset":[{}])

"crosshair-x":{  
            "text":"%t Sales: %k: $%v",  
            "line-color":"red",  
            "line-width":"3px",  
            "font-color":"purple",  
            "font-weight":"bold",  
            "value-label":{  
               "alpha":0.6,  
               "background-color":"green"  
            },  
            "scale-label":{  
               "alpha":1,  
               "background-color":"#0000ff",  
               "font-color":"#ffffff",  
               "font-weight":"bold"  
            },  
            "marker":{  
               "size":"3",  
               "background-color":"#ff0000",  
               "border-color":"#00ff00",  
               "border-width":"2px"  
            }  
         }

Happy Charting!

Mention us on Twitter or Email us with any questions!

  • Andrew