Skip to content

Display hint vertically of chart when hovering on horizontal label.

License

Notifications You must be signed in to change notification settings

jimyhuang/chartist-plugin-verticalhint

Repository files navigation

Vertical Hint plugin for Chartist.js

This plugin inspired by chartist tooltip plugin. The difference is when mouseover the horizontal label, it will show all values of that column in the tip.

Please visit http://gionkunz.github.io/chartist-js/plugins.html for more information.

Sample usage in Chartist.js

online demo here.

chartist plugin verticalhint screenshot

var chart = new Chartist.Line('.ct-chart', {
  labels: ['2011', '2012', '2013', '2014', '2015', '2016'],
  series: [
    // seriese 1
    [
      {meta: 'description', value: 1},
      {meta: 'description', value: 5},
      {meta: 'description', value: 3},
      {meta: 'description', value: 3},
      {meta: 'description', value: 3},
      {meta: 'description', value: 3}
    ],
    // series 2
    [
      2, 4, 2, 2, 4, 2
    ]
  ],
}, {
  plugins: [
    Chartist.plugins.verticalhint({
      valuePrefix: 'USD$',
      valueSuffix: '.00',
      customSelector: '',
      seriesLabel:[
        'Google', // series 1 label
        'Apple', // series 2 label
      ],
    })
  ]
});

About

Display hint vertically of chart when hovering on horizontal label.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published