chartist-plugin-tooltips-updated

v1.0.0

Published

a year ago

Point Labels Plugin for Chartist.js

Downloads

28,185

0High
0Medium
0Low

lukbukkit

chartist plugin tooltip

Tooltips for Chartist

This plugin provides quick and easy tooltips for your Chartist charts. It's published on npm as chartist-plugin-tooltips-updated.

Configuration Options

The following options can be configured when the plugin is loaded. Their default values are as shown.

var defaultOptions = {
  currency: undefined, // Accepts '£', '$', '€', etc.
  // Append curreny information 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 the tooltip wrapper

  anchorToPoint: false, // Accepts true or false
  // Tooltips do not follow mouse movement -- they are anchored to the point / bar.

  appendToBody: true, // Accepts true or false
  // Appends tooltips to body instead of chart container,

  metaIsHTML: false // Accepts true or false
  // Whether to parse the meta value as HTML or plain text
};

Sample Usage

1. Install the plugin

yarn add chartist-plugin-tooltips-updated

2. Include JS

Include the JavaScript script file of the plugin either using one of two options:

Include it using a <script> tag:

<script src="node_modules/chartist/dist/index.umd.js"></script>
<script src="node_modules/chartist-plugin-tooltips-updated/dist/chartist-plugin-tooltip.min.js"></script>

<script>
  var chart = new Chartist.LineChart('.ct-chart', data, {
    plugins: [
      Chartist.plugins.tooltip()
    ]
  });
</script>

Include it using an import:

import { LineChart } from 'chartist';
import ChartistTooltip from 'chartist-plugin-tooltips-updated';

let chart = new LineChart('.ct-chart', data, {
  plugins: [
    ChartistTooltip()
  ]
});

Warning: The version 0.0.17 of the original package available on npm included a s suffix for the tooltip function which now has been removed, see the related commit.

3. Include CSS

Include the two CSS files in your project:

node_modules/chartist/dist/index.css
node_modules/chartist-plugin-tooltips-updated/dist/chartist-plugin-tooltip.css

Either using one of two options:

Include them in the <head> of your HTML file

<link rel="stylesheet" href="node_modules/chartist/dist/index.css">
<link rel="stylesheet" href="node_modules/chartist-plugin-tooltips-updated/dist/chartist-plugin-tooltip.css">

Include them as Webpack CSS imports

import 'chartist/dist/index.css';
import 'chartist-plugin-tooltips-updated/dist/chartist-plugin-tooltip.css';

4. Configure Labels

Without a descriptive text:

var chart = new Chartist.LineChart('.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: [
    Chartist.plugins.tooltip()
  ]
});

With a descriptive text:

var chart = new Chartist.LineChart('.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: [
    Chartist.plugins.tooltip()
  ]
});

With a custom formatted descriptive text:

var chart = new Chartist.LineChart('.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: [
    Chartist.plugins.tooltip({
      currency: '$',
      class: 'class1 class2',
      appendToBody: true
    })
  ]
});

If you change the CSS properties of the tooltip, you shouldn't change the display property, otherwise the tooltip may be incorrectly positioned.

Custom Point Element

This guide is a bit outdated and may not work with new versions of the plugin.

In Chartist, you can replace the default point element with a custom element. There is a pretty demo which uses events to replace the default point graphics. If you want the tooltip to work fine with a new element, you need to include two more properties to your custom element:

'ct:value': data.value.y,
  'ct:meta': data.meta,

And you have to add the following CSS rule to the new element by using the style option or by adding this rule to your css class:

pointer-events: all!important;

(If you want to read more about, why you have to add this css rule take a look at chartist-plugin-tooltip#72)

So the final code could look like this. Here is a live demo

chart.on('draw', function(data) {
  // If the draw event was triggered from drawing a point on the line chart
  if(data.type === 'point') {
    // We are creating a new path SVG element that draws a triangle around the point coordinates

    var circle = new Chartist.Svg('circle', {
      cx: [data.x],
      cy: [data.y],
      r: [5],
      'ct:value': data.value.y,
      'ct:meta': data.meta,
      style: 'pointer-events: all !important',
      class: 'my-cool-point',
    }, 'ct-area');

    // With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle
    data.element.replace(circle);
  }
});

plugins: [
  Chartist.plugins.tooltip({
    appendToBody: true,
    pointClass: 'my-cool-point'
  })
]

Why this fork?

This repository is a fork of tmmdata/chartist-plugin-tooltip. (Thanks for the great work!)

It seems as this repository is no longer maintained, that's why I decided to fork it and include several pull requests and update the dependencies.

Included Pull Requests

#87 Document new meta options from meisanerd
#131 (feature) add chartist-plugin-tooltip.scss to dist folder from Zadvornyi
#136 Fix issue checking chart type when uglified from jkowens
#128 Fixes width/height being incorrect from jdoyle65
#160 Fixed memory leak from callanto
#173 Adding support for SOLID donut graphs from AlexLaforge
#9 Add support to IE11 from Borrajo
#20 Support for Chartist v1 from stklcode

More new exciting stuff

Upgrade to Yarn
Up-to-date dependencies
Latest version published on npm