Fixed tooltip positioning

Here's a demo of a nice-looking Bar chart that shows a new option that has been added for version 5.25 - the tooltipsPositionStatic property. The tooltip also has a pointer that is indicating the relevant bar and that's enabled by using the new tooltipsPointer option.

Notice also that the tooltip key color blobs have a white border around them. css for the key color blobs can be stipulated by using the tooltipsFormattedKeyColorsCss.

And finally, there's also a tooltipsPointerCss option - you probably won't need this though.

Adding a CSS border to your canvas tag

Also, on an entirely different note, here's a tip that you may or may not know. If you want a border around your chart then you can do that easily with css. However, if you use tooltips as well then the extra width of the border can throw the calculations of the correct positions out.

Fortunately you easily circumvent this by wrapping your canvas tag in a div tag and applying any border that you want to that instead. For example:

<div style="border: 100px solid gray; display: inline-block">
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
</div>