Angular Kendo Charts background color

[alex]

hi,

I would like to apply a color as the background of the whole graph.

<kendo-chart>
        <kendo-chart-title text="Units sold"></kendo-chart-title>
        <kendo-chart-category-axis>
            <kendo-chart-category-axis-item [categories]="['Q1', 'Q2', 'Q3', 'Q4']">
            </kendo-chart-category-axis-item>
        </kendo-chart-category-axis>
        <kendo-chart-series>
          <kendo-chart-series-item type="bar" [gap]="2" [spacing]=".25" [data]="[100, 123, 234, 343]">
          </kendo-chart-series-item>
          <kendo-chart-series-item type="bar" [data]="[120, 67, 231, 196]">
          </kendo-chart-series-item>
          <kendo-chart-series-item type="bar" [data]="[45, 124, 189, 143]">
          </kendo-chart-series-item>
          <kendo-chart-series-item type="bar" [data]="[87, 154, 210, 215]">
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>

something like attached file

 

 

 

 

[Hetali]

Hi Alex,

In order to apply a color as a background of the entire chart, use the background property of the ChartAreaComponent. For example:

<kendo-chart>
  <kendo-chart-area background="#1fdb64"></kendo-chart-area>
</kendo-chart>

In this StackBlitz example, I have applied a background color to the Kendo UI Chart Area.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik