How to change Background Color of chart area only - HtmlChart

4 posts, 0 answers
  1. Andrew
    Andrew avatar
    6 posts
    Member since:
    Jul 2011

    Posted 29 Dec 2015 Link to this post

    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

     

  2. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 01 Jan Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andrew
    Andrew avatar
    6 posts
    Member since:
    Jul 2011

    Posted 05 Jan Link to this post

    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

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 05 Jan Link to this post

    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
Back to Top