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 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!

comments powered by Disqus