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>