Kendo Angular Chart Legend Colors

Question

I have a Kendo for Angular column chart where we change the colors. The colors of the bars changed, but the Legend is still showing the default colors. Anybody know what Im missing?

https://stackblitz.com/edit/angular-8smzaw

Answer 1

The colours in the legend correspond to the colours of the series. Setting the colours of each column does not change the series. You need to remove the color settings and set the series instead.

Your template definitions should look something like this:

<kendo-chart [seriesColors]="['#4F81BD', '#C0504D']">
          <kendo-chart-legend  position="top"></kendo-chart-legend>
            <kendo-chart-axis-defaults>
              <kendo-chart-axis-defaults-labels format="c0"></kendo-chart-axis-defaults-labels>
              </kendo-chart-axis-defaults>
            <kendo-chart-tooltip format="{0:C}"></kendo-chart-tooltip>
                <kendo-chart-series>
                    <kendo-chart-series-item
                        *ngFor="let item of detailSeries"
                        [data]="item.items" [name]="item.value"
                        field="value" categoryField="service"
                        type="column">
                    </kendo-chart-series-item>
               </kendo-chart-series>

      <kendo-chart-category-axis>
          <kendo-chart-category-axis-item>
              <kendo-chart-category-axis-item-labels [rotation]="-45"></kendo-chart-category-axis-item-labels>
          </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
</kendo-chart>