Skip to content

kilobyte2007/chartist-plugin-tooltip

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Note the 's' on the end of the package name. chartist-plugin-tooltip with no 's' is a different package that does not appear to be actively maintained.

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
  showOnClick: false,
  //whether to show the tooltip on click (will show on hover by default)
  showValue: true,
  //whether to show the value of the data point inside the tooltip
  position: {
    y: 'top',
    //top, bottom, middle
    x: 'center'
    //left, center, right  
  }
  //tooltip position against the data point
};

Sample usage in Chartist.js

bower install chartist-plugin-tooltip --save

With descriptive text:

var chart = new Chartist.Line('.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()
  ]
});

Without descriptive text:

var chart = new Chartist.Line('.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 options text:

var chart = new Chartist.Line('.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
    })
  ]
});

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': data.value.y,
'ct:meta': data.meta,

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,
      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'
      })

    ]

About

Tooltip plugin for Chartist.js

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 84.3%
  • CSS 10.4%
  • HTML 5.3%