vchartist-plugin-tooltip

This plugin provides quick and easy tooltips for your chartist charts. Based on the chartist-plugin-tooltip

install

npm install vchartist-plugin-tooltip

Available options and their defaults

  const defaultOptions = {
    valueTransform: Chartist.noop,
    seriesName: true // Show name of series in tooltip.
  }

Example

import vctTooltip from 'vchartist-plugin-tooltip'
import $ from 'jQuery'
new Vue({
  el,
  replace: false,
  template: `<chartist
    type="Line"
    :data="chartData"
    :options="chartOptions">
  </chartist>`,
  data: {
    chartData: {
      labels: ['A', 'B', 'C'],
      series: [{
        name: 'test',
        data: [{
          value: 1,
          meta: 'one'
        }, {
          value: 3,
          meta: 'three'
        }, {
          value: 2,
          meta: 'two'
        }]
      }]
    },
    chartOptions: {
      lineSmooth: false,
      width: '100%',
      height: '300px',
      chartPadding: {
        top: 40,
        right: 15,
        bottom: 30,
        left: 30
      },
      plugins: [
        vctTooltip($, {
          seriesName: true,
          valueTransform: value => value
        })
      ]
    }
  }
})

License

MIT