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