Search code examples
sparklines

jQuery Sparklines - Tooltip in Stacked Bar Chart


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/


Solution

  • 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/