How to change Background Color of chart area only - HtmlChart

[Paul]

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

 

[Dimitar]

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

[Paul]

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

[Danail Vasilev]

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