This example shows how to customize the default tooltip of a `Chart`.
{{>charts-customizedtooltip-source}}
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 `CartesianSeries` instance of the item.
- seriesIndex
- The index of the series in the `seriesCollection`.
The method returns an `HTMLElement` which is written into the DOM using `appendChild`. If you override this method and choose to return an html string, you
will also need to override the tooltip's `setTextFunction` method to accept an html string.
- planarLabelFunction
- Reference to the function used to format a planar event triggered tooltip's text
- categoryAxis
- `CategoryAxis` Reference 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`.
The method returns an `HTMLElement` which is written into the DOM using `appendChild`. If you override this method and choose to return an html string, you
will also need to override the tooltip's `setTextFunction` method to accept an html string.
- setTextFunction
- Method that writes content returned from `planarLabelFunction` or `markerLabelFunction` into the the tooltip node.
has the following signature:
- label
- The `HTMLElement` that the content is to be added.
- val
- The content to be rendered into tooltip. This can be a `String` or `HTMLElement`. 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.
CSS
```
#mychart {
margin:10px 10px 10px 10px;
width:90%;
max-width: 800px;
height:400px;
}
```
HTML
```
```
JavaScript
```
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
});
```