Charts Hover Tooltip

[abdullahonden]

I wonder how can I show information when hover on charts, because this static mode doesn't give any information, people are use it like Google Analytics, hover the line or piechart and see the details. Here is an example:

[cristijora]

Hi @abdullahonden The dashboard uses Chartist library for charts. Chartist usually exposes extra stuff via plugins. There is a tooltip plugin which you can find here https://github.com/tmmdata/chartist-plugin-tooltip

The usage is quite simple

npm install --save chartist-plugin-tooltip

And then where you initialize data for your charts

// import chartist if not imported
import Chartist from 'chartist'

// where you declare your chart data
          {
            labels: ['Jan', 'Feb', 'Mar', 'April', 'May', 'June'],
            series: [
              [230, 340, 400, 300, 570, 500, 800]
            ],
            plugins: [
              Chartist.plugins.tooltip()
            ]
          },

You can check out the chartist plugins Here as well as the Documentation

The ChartCard.vue component in the Dashboard is just a wrapper which displays the chart so you can use everything chartist has to offer. In the end if new need more complex stuff or this library is not suited for your use case, you can use any other chart library which you have more experience with. Chartist is pretty easy to use and covers a lot of use-cases and it's pretty responsive

[cristijora]

Updated docs regarding this issue Last section from readme called Chartist plugins

[mlumbroso]

Hi,

From our testing, for it to work, it needs to be npm install --save chartist-plugin-tooltips with a 's' And also import the CSS file for the plugin separately

Can you update documentation accordingly ? (or maybe enable it by default, I guess most people would need that no ?)

Thanks

[abdullahonden]

I agree, tooltips should come with default.

[cristijora]

Thanks for the feedback guys. Will add them as default to the demo charts and the repo.

[cristijora]

There is an update to V2 which uses Vue Chart.js and has great tooltip options. You can check that in the example pages as well. If you don't have access to v2, let me know what are your usernames from creativetim and I will give access to it.