Sparkline tooltip format

2 posts, 0 answers
  1. rwb
    rwb avatar
    37 posts
    Member since:
    Aug 2015

    Posted 13 Feb Link to this post

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

     

    https://dojo.telerik.com/utAxum

  2. Tsvetina
    Admin
    Tsvetina avatar
    2162 posts

    Posted 15 Feb Link to this post

    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.
Back to Top