Completed
Last Updated: 01 Feb 2022 11:22 by ADMIN
Casper
Created on: 29 Apr 2020 16:28
Category: Charts
Type: Feature Request
5
Expose a parameter that changes the background color of the plot area.
I would like to be able to change the background color of the plot are by passing a CSS color to a parameter.
4 comments
ADMIN
Stamo Gochev
Posted on: 01 Feb 2022 11:22

Hello,

The background color of the plot area can be configured as of the 2.30.0 release:

https://www.telerik.com/support/whats-new/blazor-ui/release-history/ui-for-blazor-2-30-0-blazor-2-30-0

The following code demonstrates the customization:

<TelerikChart>
    <ChartPlotArea Background="yellow" ></ChartPlotArea>
    ...
</TelerikChart>

As previously explained, configuring the color for other parts of the plot area will be handled in separate feature requests.

Regards,
Stamo Gochev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN
Marin Bratanov
Posted on: 19 Oct 2021 21:15

Hello Nikolas,

I think you are looking for a feature we call Plot Bands: https://feedback.telerik.com/blazor/1520686-is-it-possible-to-change-the-plot-area-background-color-in-an-alternating-way-plot-bands. If so, click the Vote and Follow buttons there. This is not something that can be achieved with a plain background color setting.

 

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Nikolas
Posted on: 14 Oct 2021 07:22

Hello Svetoslav,

Is it possible to only color every second row only?

Something like this:

Thanks

Regards,
Nikolas

ADMIN
Svetoslav Dimitrov
Posted on: 30 Apr 2020 09:13

Hello,

As a workaround, you can use some CSS rules to target the plot area and change it's color. If there are multiple Charts on the same view their plot areas will all be colored the same way.

CSS:

<style>
    .k-chart svg > g > path:nth-child(2) { 
        fill: green !important;
        fill-opacity: 1 !important;
    }
</style>

Regards,
Svetoslav Dimitrov
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.