Formatting the Tooltip

[AP]

I'm trying to set up a sparkline, and I've got it working.

However, the tool tip shows the data field name, as well as the value, unlike your demos, where just the number is shown.

@(Html.Kendo().Sparkline()
.Name("BatchTimeSpark")
.Type(SparklineType.Column)
.DataSource(ds=>ds
    .Read(read => read.Action("GetBatchStats", "Home"))
  )
  .Series(s=>s
      .Column("RunLength")
  )


  )

I've attached a screenshot of the tool tip.
Also, what's the best way to set the height. My chart seems very short (the values are small, but I expected it to scale).

Thanks
--

[Iliana Dyankova]

Hello Andrew,

Apologies for not getting back to you earlier.

Up to your questions: 

• I believe the illustrated issue is CSS related (most probably some border is applied to the table elements of the tooltip) and in order to assist you best and provide concrete recommendations I will need a small runnable example which demonstrates it. Please provide such a project and I will check it right a way. Thank you in advance for your time;
• You can achieve this using custom CSS. For example: 

  .k-sparkline {
      line-height: //....px;
  }

Regards,

Iliana Nikolova
the Telerik team

[AP]

Thanks.

I've created a new project, and set up the sample.  I think it's related to the Site.css file, as using the one generated by the template , the tooltips look better (although still have a description).  However, my project was already set-up, so I copied the css across.  I really need to know exactly which elements are required.

The attached project uses my original site.css, and displays the same issues as my actual project.

NB: I've had to delete the binaries, and scripts from the ZIP file to get it to upload.

[Iliana Dyankova]

Hi Andrew,

Thank you for sending your project.

The illustrated result is caused by the table, table td and table th CSS rules from the Site.css file, where a border is set. Hence in order to achieve the desired outcome you should override the aforementioned rules for the Chart tooltip's table. For example: 

<style>
.k-sparkline table,
.k-sparkline table td,
.k-sparkline table th {
    border: none;
}

.k-sparkline table th {
    background: none;
}
</style>

Kind regards,

Iliana Nikolova
the Telerik team

[AP]

Thanks for this. The tooltips now look a lot better.

However, I really want to show the number without the field name (like your demo http://demos.kendoui.com/dataviz/sparklines/index.html ). 

How can I do this?

[Iliana Dyankova]

Hello Andrew,

In order to achieve the desired outcome you can set the shared configuration option of the tooltip to false. For example: 

@(Html.Kendo().Sparkline()
   //....
   .Tooltip(t => t.Shared(false))
)

Kind regards,

Iliana Nikolova
the Telerik team

[AP]

That's great.

Thanks