Tooltip plugin for Chartist.js
This plugin provides quick and easy tooltips for your chartist charts. Touch support is planned soon.
Please visit http://gionkunz.github.io/chartist-js/plugins.html for more information.
NPM package: https://www.npmjs.com/package/chartist-plugin-tooltips
Available options and their defaults
var defaultOptions = currency: undefined //accepts '£', '$', '€', etc. //e.g. 4000 => €4,000 tooltipFnc: undefined //accepts function //build custom tooltip transformTooltipTextFnc: undefined // accepts function // transform tooltip text class: undefined // accecpts 'class1', 'class1 class2', etc. //adds class(es) to tooltip wrapper anchorToPoint: false //accepts true or false //tooltips do not follow mouse movement -- they are anchored to the point / bar. appendToBody: false //accepts true or false //appends tooltips to body instead of chart container;
Sample usage in Chartist.js
bower install chartist-plugin-tooltip --save
With descriptive text:
var chart = '.ct-chart' labels: 1 2 3 series: meta: 'description' value: 1 meta: 'description' value: 5 meta: 'description' value: 3 meta: 'other description' value: 2 meta: 'other description' value: 4 meta: 'other description' value: 2 plugins: Chartistplugins ;
Without descriptive text:
var chart = '.ct-chart' labels: 1 2 3 4 5 6 7 series: 1 5 3 4 6 2 3 2 4 2 5 4 3 6 plugins: Chartistplugins ;
With options text:
var chart = '.ct-chart' labels: 1 2 3 series: meta: 'description' value: 1 meta: 'description' value: 5 meta: 'description' value: 3 meta: 'other description' value: 2 meta: 'other description' value: 4 meta: 'other description' value: 2 plugins: Chartistplugins ;
Custom point element.
In ChartistJS you can replace default element with smth different. There is a pretty demo (USING EVENTS TO REPLACE GRAPHICS). And if you want the tooltip to work fine with a new element, you need to include two more properties:
'ct:value': datavaluey'ct:meta': datameta
So the final code could look like this. Here is a live demo
chart;
plugins: Chartistplugins