CODEWITHSUNDEEP
angularkendo-uikendo-chart
kirhhof
kirhhof

Reputation: 27

kendo chart tooltip custom position on plot area

I want to position the tooltip's from the kendo UI chart on a custom position on the plot area. By using the kendo-chart-tooltip padding property, it only affects the inner content of tooltip see plunker. I want to set the tooltip position relative to the chart by setting it on plotAreaHover event, can one help me? here is an image of what I need

<kendo-chart [categoryAxis]="{ categories: categories }" (plotAreaHover)="onPlotAreaHover($event)">
    <kendo-chart-title text="GDP annual %"></kendo-chart-title>
    <kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
    <kendo-chart-tooltip [shared]="true" format="{0}%" [padding]="tooltipPadding"></kendo-chart-tooltip>
    <kendo-chart-series>
        <kendo-chart-series-item *ngFor="let item of series"
        type="line" style="smooth" [data]="item.data" [name]="item.name">
        </kendo-chart-series-item>
    </kendo-chart-series>
</kendo-chart>

Upvotes: 0

Views: 3032

Answers (2)

kirhhof
kirhhof

Reputation: 27

Guys from telerik answered my question:

This scenario is not supported out-of-the-box, however you could achieve it by using additional CSS. As an example: 

.k-chart-tooltip-wrapper .k-animation-container {
    position: absolute !important;
    top: 0 !important;
}

here is a demo plunker

Upvotes: 0

ezanker
ezanker

Reputation: 24738

You could use the seriesHover event to build and position you own tooltip.

    seriesHover: function(e){
      var $pos = $("#chart").offset() //position of chart
      var positionX = $pos.left + 30,
          positionY = $pos.top + 2,
          di = e.dataItem;
      // Build tooltip HTML    
      var html =  '<div><strong>' +  di.cat + '</strong></div>';
      html += '<table><tr>';
      html += '<td>India</td><td>' + di.India + '</td>';
      html += '</tr><tr>';
      html += '<td>Russian Federation</td><td>' + di.RF + '</td>';
      html += '</tr><table>';
      //Show and position the tooltip with the html content                       
      $("#customTooltip").show().css("top", positionY).css("left", positionX).html(html);
    }

example CSS for the custom tooltip:

  #customTooltip {
    display: none;
    position: absolute;
    background: #eee;
    border-radius: 5px;
    height: auto;
    width: auto;
    border: 1px solid #999;
    padding: 10px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.19), 0 3px 6px rgba(0,0,0,0.23);
  }

Working DEMO

Upvotes: 1

Related Questions