Last Updated: 01 Dec 2022 09:07 by ADMIN
Created on: 29 Apr 2020 20:49
Category: Charts
Type: Feature Request
color on the bubble chart

Please see the attached screenshot. 

On the leftmost  side, the donut chart on the top has dark blue color (Oil). And i am using the same color for the bubble chart below. But the color on the bubble is not showing dark blue but lighter one. Interestingly if i mouse over on the bubble. the color turns dark blue. how can we make it show the right color(dark blue)? and only show lighter blue when mouse over?

this is my template in case you need it. 


  <kendo-chart (seriesClick)="onSeriesClick($event)  " style="height:800px">
      <kendo-chart-title text="Efficent Hedging: M-risk by Commodity ({{position}} Portfolio)" [font]="font"></kendo-chart-title>
      <kendo-chart-series-item [labels]="{ visible: true, content: 'test',  color: 'white', background:'none'}" [color]="barColor" type="bubble" [data]="data" xField="x" yField="y" sizeField="y" categoryField="category">
          <ng-template let-value="value" let-category="category" let-dataItem="dataItem" style="white-space: pre-line">
            <div style="white-space: pre-line">{{tooltip(dataItem )}} </div>

      <kendo-chart-x-axis title="xx">
        <kendo-chart-x-axis-item [title]="{ text: 'Liquidity Premium (cost in cents to hedge 1$ of M-risk) ', font: font }" [labels]="{ format: '{0:N0}' }">

          <kendo-chart-x-axis-item-labels format="{0:N0}" [skip]="1" rotation="auto">
      <kendo-chart-y-axis title="yy">
        <kendo-chart-y-axis-item [title]="{ text: 'M-risk ($MM) ', font:font }" [labels]="{ format: '{0:N0}' }">

      <kendo-chart-legend [visible]="true">
Attached Files:
Posted on: 01 Dec 2022 09:06


We are declining this feature request due to low customer demand.

Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at

Posted on: 30 Apr 2020 14:03

Hello William,

In it by design that bubbles in the chart are with added transparency, since bubbles by design may overlap. There is an option to fix the opacity like

  type="bubble" [data]="data" xField="x" yField="y" sizeField="size" categoryField="category 
  [color]="pointColor" [opacity]="1">

in that case hovering the bubble will not add opacity, since it is fixed by upper directive.

I will log an feature request in our Feedback portal  so to have option to invert bubble normal colors.

As for now seriesOver/seriesLeave event workaround can be used.


Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Posted on: 30 Apr 2020 13:57
Bubble chart have transparent item by default since those are meant to overlap, when item is hovered it loses its transparency. In order to have bbule chart with same color/hover behavior as others, we would need some [inverseHoverColor] setting.