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

How to change Background Color of chart area only - HtmlChart

3 Answers 522 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 29 Dec 2015, 11:07 AM

Hi,

For the RadHtmlChart I was wondering if there is any way to change the background color of the main chart area only like you could with RadChart?

Appearance.FillStyle.BackgroundColor controls the background to everything including legend, title and axes

PlotArea.Appearance.FillStyle.BackgroundColor colors the main chart area AND the area behind the y-axis labels which looks a bit odd. I've attached examples with RadChart and RadHtmlChart for comparison. We'd like everything but the main chart area to be transparent so whatever is behind the chart can be displayed, in this case a gray RadDock.

Many thanks,

Andy

 

3 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 01 Jan 2016, 10:28 AM
Hi Andy,

I am afraid that I am not able to replicate this behavior on my side. I used the HtmlChart - Chart Element Customization demo, which uses the same code to set the PlotArea background color - screenshot. Could you try it on your side?

Regards,
Dimitar
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Paul
Top achievements
Rank 1
answered on 05 Jan 2016, 10:15 AM

Thanks Dimitar that was very useful because it made me review what I was doing. I was creating an additional Y axis and setting its visibility to false if I didn't need it but this meant the chart was extending the plot area to the additional axis. I've changed my code so that the additional Y axis is not even created unless it is required. I've attached an example chart with both axes showing how the plot area expands behind the first y-axis in case someone else hits a similar issue.

All the best,

Andy

0
Danail Vasilev
Telerik team
answered on 05 Jan 2016, 12:45 PM
Hello Andy,

Aligning the second axis to a different point from the first one resolves the issue - http://screencast.com/t/tlK7tgA2VDvD

<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
    <PlotArea>
        <Appearance>
            <FillStyle BackgroundColor="Green" />
        </Appearance>
        <Series>
            <telerik:ColumnSeries Name="Series 1">
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="30" />
                    <telerik:CategorySeriesItem Y="10" />
                    <telerik:CategorySeriesItem Y="20" />
                </SeriesItems>
            </telerik:ColumnSeries>
        </Series>
        <AdditionalYAxes>
            <telerik:AxisY></telerik:AxisY>
        </AdditionalYAxes>
        <XAxis>
            <AxisCrossingPoints>
                <telerik:AxisCrossingPoint Value="0" />
                <telerik:AxisCrossingPoint Value="10" />
            </AxisCrossingPoints>
            <LabelsAppearance RotationAngle="33"></LabelsAppearance>
            <Items>
                <telerik:AxisItem LabelText="Item 1" />
                <telerik:AxisItem LabelText="Item 2" />
                <telerik:AxisItem LabelText="Item 3" />
            </Items>
        </XAxis>
    </PlotArea>
</telerik:RadHtmlChart>


Regards,
Danail Vasilev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Chart (HTML5)
Asked by
Paul
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Paul
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or