This is a migrated thread and some comments may be shown as answers.

Angular Kendo Charts background color

1 Answer 9 Views
Charts
This is a migrated thread and some comments may be shown as answers.
alex
Top achievements
Rank 1
Iron
Veteran
alex asked on 28 Jan 2021, 05:04 PM

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

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Hetali
Telerik team
answered on 28 Jan 2021, 10:22 PM

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

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 https://learn.telerik.com/.

Tags
Charts
Asked by
alex
Top achievements
Rank 1
Iron
Veteran
Answers by
Hetali
Telerik team
Share this question
or