Unplanned
Last Updated: 01 May 2020 06:45 by ADMIN
William
Created on: 29 Apr 2020 20:49
Category: Charts
Type: Feature Request
0
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-series>
      <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">
        <kendo-chart-series-item-tooltip>
          <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>
          </ng-template>
        </kendo-chart-series-item-tooltip>

      </kendo-chart-series-item>
      <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-x-axis-item-labels>
        </kendo-chart-x-axis-item>
      </kendo-chart-x-axis>
      <kendo-chart-y-axis title="yy">
        <kendo-chart-y-axis-item [title]="{ text: 'M-risk ($MM) ', font:font }" [labels]="{ format: '{0:N0}' }">
        </kendo-chart-y-axis-item>
      </kendo-chart-y-axis>

      <kendo-chart-legend [visible]="true">
      </kendo-chart-legend>
    </kendo-chart-series>
  </kendo-chart>
Attached Files:
2 comments
ADMIN
Ivan
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

<kendo-chart-series-item
  type="bubble" [data]="data" xField="x" yField="y" sizeField="size" categoryField="category 
  [color]="pointColor" [opacity]="1">
</kendo-chart-series-item>

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.

 

Regards,
Ivan
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.
Ivan
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.