Default Tooltip can be modified at dataSeries or dataPoint level. You can add content to be displayed in toolTip using toolTipContent. toolTipContent set at dataPoint will override toolTipContent set at dataSeries level.
Default: auto set depending on chart type.toolTipContent can either be literal string or keywords. You can also use HTML tags.
eg: toolTipContent: "x: {x}, y: {y} "
eg: toolTipContent: " x: {x}, y: {y[0]} , {y[1]} "eg: toolTipContent: " x: {x}, y: {y[0]}, {y[1]}, {y[2]}, {y[3]} "
eg: toolTipContent: "y: <span style='\"'color: red;'\"'>{y}</span>"
eg: toolTipContent: "{x}<br/> <span style='\"'color: {color};'\"'>{name}</span>, <strong>{y}</strong>",
eg: toolTipContent: "x:{x}, y: {y} <br/> name: {name}, label:{label}"
eg: toolTipContent: "{label} <hr/> x: {x}, y: {y}"
eg. toolTipContent: "<a href = '\"'http://apple.com'\"' target='\"'_blank'\"' >{label} </a> <hr/> x: {x}, y: {y}"
var chart = new CanvasJS.Chart("container",
{
.
.
data: [{
dataPoints: [
{ y: 10, label: "label1", toolTipContent: {name}: {y} },
],
},
]
.
.
});
chart.render();
Try various combinations below.
Comments 17
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix
Hi There, how do you format a data point value to have “$###,###.00” for the TooTip?
Thanks,
Carlos.
Hi Carlos,
You can specify xValueFormatString and yValueFormatString inside data (Type: Array of Objects) for axis x values and axis y values to format the information inside the indexLabel or toolTip.
You can read more about the syntax here.
The example shows how to achieve the same, as well.
Hi, Does anybody know why the toolTip is display off the graph area? I want it to stay within the graph area. Any idea?
Thanks,
Carlos.
When you say Graph Area do you mean the entire chart or the area between the two axis where dataPoints are drawn? If you mean the area between the two axis, then the behaviour is by design. I think it should be fine as long as the ToolTip doesn’t go outside the chart itself – which doesn’t happen as of now.
how can i set tool tip for stack column values
how can i set width of column in column charts
Hi,
By default toolTip works in each chart types. If you want more customization just go through toolTip documentation.
Hi,
We don’t have this feature as of now.
I want To show Cursor x,y axis points in tooltip? Is it Possible?
Dinesh,
As of now its is not possible to do the same.
Is there a way to hide the tooltip for some points (not for all)?
Set toolTipContent to null for those dataPoints you want to hide. Here is a jsfiddle for the same.
When I use Stepped Line Chart, the tooltip {x} value only show Month and Year, not specific to the date.
Its make me difficult to create a link using the specific date on the datasets.
Hi Nasyarobby,
toolTip-content’s format is calculated internally depending on dataPoints. If you want a specific format you can use xValueFormatString and yValueFormatString. Here is an example.
Is there a way to include a specific toolTip only for some values, say for those where y>100, where datapoints are inserted from a separate php file and unknown inside the canvasjs object ?
Subhannita,
Yes you can customise the toolTip as the way you want using contentFormatter function. For example you can compare as
if(e.entries[0].dataPoint.y > 100)and can return it’s content.Thanks! :)