Using jQuery Sparklines v2.1.2
, I am creating a Stacked Bar Chart.
The Tooltip values are displaying correctly. It's displaying the Column Name as Tooltip for each small block. How should I customize the tooltip for each small block?
tooltipFormat: '{{offset:offset}} - {{value}}',
tooltipValueLookups: {
'offset': {
0: 'India',
1: 'France',
2: 'USA'
}
The Source Code is available in: http://jsfiddle.net/Hj6fB/236/
In case you are still looking for a solution.
This worked for me https://groups.google.com/forum/#!topic/jquery-sparkline/XcigtHeVx3M
$('#StackedBarChart').sparkline([
[1, 4, 2],
[2, 3, 2],
[3, 2, 2],
[4, 1, 2]
], {
type: 'bar',
// Map the offset in the list of values to a name to use in the tooltip
myPrefixes: ['USA', 'France','India'],
tooltipFormatter: function(sp, options, fields) {
var format = $.spformat('<div class="jqsfield"><span style="color: {{color}}">●</span> {{myprefix}} {{value}}</div>');
var result = '';
$.each(fields, function(i, field) {
field.myprefix = options.get('myPrefixes')[i];
result += format.render(field, options.get('tooltipValueLookups'), options);
})
return result;
},
height: "75px",
barWidth: "30px",
});
See example http://jsfiddle.net/Hj6fB/241/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With