Skip to content

Latest commit

 

History

History
244 lines (199 loc) · 7.66 KB

README.md

File metadata and controls

244 lines (199 loc) · 7.66 KB
Raw

Tooltips for Chartist

npm

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

⚠️ This package is deprecated and will no longer receive updates, including bug fixes or new features. If you require tooltips, I recommend switching to another charting library.

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:

  1. 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>
  1. 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:

  1. 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">
  1. 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

More new exciting stuff

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