Closed abdullahonden closed 6 years ago
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
Updated docs regarding this issue
Last section from readme called Chartist plugins
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
I agree, tooltips should come with default.
Thanks for the feedback guys. Will add them as default to the demo charts and the repo.
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.
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: