4

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/

Bala Sakthis
  • 664
  • 1
  • 8
  • 20

1 Answers1

7

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}}">&#9679;</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/

Xane Ali
  • 86
  • 1
  • 3
  • What are the sp, options, fields here in the function you have declared ? What values are assigned to them ? – HookUp Jun 13 '19 at 20:04