[Solved] Chart Tooltips with buttons

[Walid]

Hello,

I'm playing around with chart tooltips (kendo.dataviz.chart & kendo.dataviz.sparkline)
Using a function to provide the tooltip content I'm able to customize its content in order to add some buttons (used to launch actions from each tooltip directly).
The problem that I'm having is that I can't figure out how to keep mouse focus while staying over of the tooltip and trying to click anyone of the buttons. I need to prevent the chart control to draw a new tooltip when the pointer is moving away from the original chart point.

Is there any way to handle the mouse behaviour over a tooltip object? (I've checked with autoHide: false and showOn: "click" - no luck)
Is there a better way to have "buttons" or "actions" associated to points in charts?

Thanks,
Walid

[Iliana Dyankova]

Hi Walid,

This scenario is not supported out-of-the-box by Kendo UI Chart. As a possible workaround I can suggest the following appoach: 
- Hide the default tooltip;
- Show the tooltip in the seriesClick event with a custom position.

$("#chart").kendoChart({
  //....
  tooltip: {
     visible: false,
  },
  seriesClick: onSeriesClick
});

function onSeriesClick(e){
  $("#chart .k-tooltip").html(e.dataItem).css('background', e.series.color).show();
}

/* CSS */
.k-tooltip{
   /* custom position */
}
</style>

Regards,
Iliana Nikolova
Telerik

 

 

[Arsen]

hello,

in this way how can I set position dynamically on the top of each series ?

[Iliana Dyankova]

Hello Arsen,

I answered to the same question in your other ticket, however here is my answer too:

This scenario is not supported out-of-the-box by Kendo UI Chart. As a possible workaround I would suggest to use the k-chart-tooltip class and add an appropriate top / left margin values.

.k-chart-tooltip{
   margin-top: -35px !important;
   margin-left: -30px !important;
}

Regards,
Iliana Nikolova
Telerik

 

 

[Arsen]

Thank you, Iliana.

One more question, How can I change bar opacity with onSeriesClick event ?

Thanks in advance

[Iliana Dyankova]

Hi Arsen,

In order to achieve this you should change the series.opacity value and redraw the chart. As an example: 

$("#chart").kendoChart({
  //....
  seriesClick: function(e){
     e.series.opacity = 0.5
     e.sender.redraw();
  },
  transitions: false
});

Regards,
Iliana Nikolova
Telerik

 

 

[Arsen]

does not work!

Thanks

[Iliana Dyankova]

Hi Arsen,

I tested the suggested solution and it is working as expected. Please take a look at this dojo and let me know if I am missing something.

Regards,
Iliana Nikolova
Telerik

 

 

[Arsen]

Hi LLiana,

its working in common, but I need to set opacity just the bar I have clicked, not all together, and reset opacity after mouse leave from selected bar.
I have set the highlight=false on seriesHover event, and need to set custom opacity on click event.

thanks

[Iliana Dyankova]

Hi Arsen,

Actually the opacity configuration is related to the entire series not to a particular point in the series, however you can change the color of the clicked bar. As a possible approach I would suggest the following:
- Define colorField for all points;
- In the seriesClick event change the colorField value.

 For your convenience here is a simple example. Please keep in mind that there is no event which fires when the mouse leaves the selected bar.

Regards,
Iliana Nikolova
Telerik