This example shows how to customize the default tooltip of a Chart.
This example shows how to customize the tooltip for a Chart.
A Chart instance comes with a simple default tooltip. This tooltip is represented by the tooltip attribute. Through the tooltip attribute you can do the following:
- Style the tooltip background, border and text.
- Customize and format the tooltip message.
- Change the show and hide events.
- Disable the tooltip.
The tooltip attribute contains the following properties:
- node
- Reference to the actual dom node
- showEvent
- Event that should trigger the tooltip
- hideEvent
- Event that should trigger the removal of a tooltip (can be an event or an array of events)
- styles
- A hash of style properties that will be applied to the tooltip node
- show
- Indicates whether or not to show the tooltip
- markerEventHandler
- Displays and hides tooltip based on marker events
- planarEventHandler
- Displays and hides tooltip based on planar events
- markerLabelFunction
- Reference to the function used to format a marker event triggered tooltip's text. The method contains
the following arguments:
- categoryItem
- An object containing the following:
- axis
- The axis to which the category is bound.
- displayName
- The display name set to the category (defaults to key if not provided).
- key
- The key of the category.
- value
- The value of the category.
- valueItem
- An object containing the following:
- axis
- The axis to which the item's series is bound.
- displayName
- The display name of the series. (defaults to key if not provided)
- key
- The key for the series.
- value
- The value for the series item.
- itemIndex
- The index of the item within the series.
- series
- The
CartesianSeriesinstance of the item. - seriesIndex
- The index of the series in the
seriesCollection.
HTMLElementwhich is written into the DOM usingappendChild. If you override this method and choose to return an html string, you will also need to override the tooltip'ssetTextFunctionmethod to accept an html string. - planarLabelFunction
- Reference to the function used to format a planar event triggered tooltip's text
- categoryAxis
-
CategoryAxisReference to the categoryAxis of the chart. - valueItems
- Array of objects for each series that has a data point in the coordinate plane of the event. Each object contains the following data:
- axis
- The value axis of the series.
- key
- The key for the series.
- value
- The value for the series item.
- displayName
- The display name of the series. (defaults to key if not provided)
- index
- The index of the item within its series.
- seriesArray
- Array of series instances for each value item.
- seriesIndex
- The index of the series in the
seriesCollection.
HTMLElementwhich is written into the DOM usingappendChild. If you override this method and choose to return an html string, you will also need to override the tooltip'ssetTextFunctionmethod to accept an html string. - setTextFunction
- Method that writes content returned from
planarLabelFunctionormarkerLabelFunctioninto the the tooltip node. has the following signature:- label
- The
HTMLElementthat the content is to be added. - val
- The content to be rendered into tooltip. This can be a
StringorHTMLElement. If an HTML string is used, it will be rendered as a string.
In this example, we have changed the styles and set a custom markerLabelFunction to format the text.
var myDataValues = [
{category:"5/1/2010", Miscellaneous:2000, Expenses:3700, Revenue:2200},
{category:"5/2/2010", Miscellaneous:50, Expenses:9100, Revenue:100},
{category:"5/3/2010", Miscellaneous:400, Expenses:1100, Revenue:1500},
{category:"5/4/2010", Miscellaneous:200, Expenses:1900, Revenue:2800},
{category:"5/5/2010", Miscellaneous:5000, Expenses:5000, Revenue:2650}
];
var myTooltip = {
styles: {
backgroundColor: "#333",
color: "#eee",
borderColor: "#fff",
textAlign: "center"
},
markerLabelFunction: function(categoryItem, valueItem, itemIndex, series, seriesIndex)
{
var msg = document.createElement("div"),
underlinedTextBlock = document.createElement("span"),
boldTextBlock = document.createElement("div");
underlinedTextBlock.style.textDecoration = "underline";
boldTextBlock.style.marginTop = "5px";
boldTextBlock.style.fontWeight = "bold";
underlinedTextBlock.appendChild(document.createTextNode(valueItem.displayName + " for " +
categoryItem.axis.get("labelFunction").apply(this, [categoryItem.value, categoryItem.axis.get("labelFormat")])));
boldTextBlock.appendChild(document.createTextNode(valueItem.axis.get("labelFunction").apply(this, [valueItem.value, {prefix:"$", decimalPlaces:2}])));
msg.appendChild(underlinedTextBlock);
msg.appendChild(document.createElement("br"));
msg.appendChild(boldTextBlock);
return msg;
}
};
var mychart = new Y.Chart({
dataProvider:myDataValues,
type:"bar",
render:"#mychart",
tooltip: myTooltip
});