Geek Answers Handbook

How to show shortcut when mouse over panel

I made a chart on a chart by chartist.js.

Now I want to add some kind of listening on the panel.

How can I make the shortcut appear when I hover over the panel?

+6
source share
1 answer

You have 2 options -


Option 1

There is a tooltip plugin that you can use. You can find it here - https://github.com/Globegitter/chartist-plugin-tooltip

Once you add the CSS and JS files, you can call this plugin like this: Chartist.plugins.tooltip()

Here is an example on the Plugins page -

 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} ] ] }, { low: 0, high: 8, fullWidth: true, plugins: [ Chartist.plugins.tooltip() ] });

This will be a simpler and better option.


Option 2

If you want to do something yourself, you can associate the mouseover and mouseout events with the draw event callback -

 var data = { labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'], series: [ [1, 2, 4, 8, 6, -2, -1, -4, -6, -2] ] }; var options = { high: 10, low: -10, axisX: { labelInterpolationFnc: function(value, index) { return index % 2 === 0 ? value : null; } } }; var chart = new Chartist.Bar('.ct-chart', data, options); var addedEvents = false; chart.on('draw', function() { if (!addedEvents) { $('.ct-bar').on('mouseover', function() { $('#tooltip').html('<b>Selected Value: </b>' + $(this).attr('ct:value')); }); $('.ct-bar').on('mouseout', function() { $('#tooltip').html('<b>Selected Value:</b>'); }); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/chartist.js/0.9.5/chartist.min.js"></script> <link href="https://cdn.jsdelivr.net/chartist.js/0.9.5/chartist.min.css" rel="stylesheet" /> <div id="tooltip"><b>Selected Value:</b> </div> <div class="ct-chart"></div>
+19
source

More articles:


All Articles