This is a migrated thread and some comments may be shown as answers.

Sparkline tooltip format

1 Answer 300 Views
Sparkline
This is a migrated thread and some comments may be shown as answers.
rwb
Top achievements
Rank 2
rwb asked on 13 Feb 2018, 09:08 AM

I am finding that the tooltip shown is not what is produced by the tooltip.template.

 

https://dojo.telerik.com/utAxum

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 15 Feb 2018, 08:55 AM
Hello,

This happens because the Sparkline uses a shared tooltip by default, which is configured through the Chart tooltip option (as opposed to series.tooltip). If you want your template to take effect, disable the shared tooltip:
$('#sparklike').kendoSparkline({
  chartArea: {
    width: 300,
    height: 75,
  },
  series: [{
    field: 'value',
    type: "column",
    color: '#1A4B78',
    tooltip: {
      template: 'Period #= dataItem.period # <br /> £#= dataItem.value #'
    }
  }],
  valueAxis: {min: 0},
  dataSource: new kendo.data.DataSource({
    data: [
      {'period': '2017-1', value: 12},
      { 'period': '2017-2', value: 12},
      { 'period': '2017-3', value: 12},
      { 'period': '2017-4', value: 12},
      { 'period': '2017-5', value: 12},
      { 'period': '2017-6', value: 12},
      { 'period': '2017-7', value: 12},
      { 'period': '2017-8', value: 12},
      { 'period': '2017-9', value: 16},
      { 'period': '2017-10', value: 12 },
      { 'period': '2017-11', value: 16 },
      { 'period': '2017-12', value: 16 },
      { 'period': '2017-13', value: 16 }
    ]
  }),
  categoryAxis: { field: 'period'},
  tooltip: {
    shared: false
  }
});

Updated Dojo: https://dojo.telerik.com/utAxum/2

Regards,
Tsvetina
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Sparkline
Asked by
rwb
Top achievements
Rank 2
Answers by
Tsvetina
Telerik team
Share this question
or