Setting RadCartesianChart background color

Thread is closed for posting
4 posts, 0 answers
  1. Mike
    Mike avatar
    3 posts
    Member since:
    Feb 2012

    Posted 13 Aug 2017 Link to this post

    I've had trouble finding how to set the background color of the RadCartesianChart. To clarify, this isn't the plot area represented by the RadCartesianChartGrid, but the space around the grid. 

    In the attached image, I want to set the white area of the chart to a specific color (or even as transparent).

    Thanks in advance.


  2. Mike
    Mike avatar
    3 posts
    Member since:
    Feb 2012

    Posted 13 Aug 2017 in reply to Mike Link to this post

    I did some more digging and found the backgroundColor property exists. Unfortunately, I didn't see it in the API documentation for RadCartesianChart of RadChartBase at Is there a better place to look to see the available properties?



  3. nikolay.tsonev
    nikolay.tsonev avatar
    343 posts

    Posted 14 Aug 2017 Link to this post

    Hello Mike,

    Thank you for contacting us.
    Indeed the background-color property exists for the RadChart's components and you could use it your project. For example:
    <Page xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-telerik-ui-pro/chart" xmlns="">
        <chart:RadCartesianChart height="200" backgroundColor="red" id="cartesianChart">
                        <chart:LinearAxis minimum="0" maximum="80" id="hAxis"/>
                        <chart:LinearAxis id="vAxis"/>
           <chart:ScatterSeries seriesName="SavingsSeries" items="{{ scatterSource }}" xProperty="Age" yProperty="Savings">             
             <chart:ScatterSeries seriesName="SalarySeries" items="{{ scatterSource }}" xProperty="Age" yProperty="Salary">
            <chart:ScatterSeries seriesName="SpendingsSeries" items="{{ scatterSource }}" xProperty="Age" yProperty="Spendings">             
          <!-- >> grid-line-annotations -->
                <chart:ChartGridLineAnnotation axisId="hAxis" hidden="false" value="50" zPosition="AboveSeries" strokeWidth="1" strokeColor="#EB916580" />
                <chart:ChartGridLineAnnotation axisId="vAxis" hidden="false" value="10000" zPosition="AboveSeries" strokeWidth="1" strokeColor="#65BFEB80" />
                <chart:ChartPlotBandAnnotation axisId="hAxis" hidden="false" value="20" zPosition="AboveSeries"  minValue="60" maxValue="70" fillColor="#A1FAC980" strokeColor="#A1FAC980"/>
                <chart:ChartPlotBandAnnotation axisId="vAxis" hidden="false" value="20000" zPosition="AboveSeries" minValue="2500" maxValue="5000" fillColor="#AC74E880" strokeColor="#AC74E880"/>
              <!-- << grid-line-annotations -->

    Regarding the second question, the right place for verifying the available specific for the component properties is api-reference documentation. The background color property comes from the View base component, which is extended from the RadChart. The API-reference for the View could be found here.
    Hope this helps.

    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  4. Mike
    Mike avatar
    3 posts
    Member since:
    Feb 2012

    Posted 14 Aug 2017 Link to this post

    Thank you, Nikolay! 
Back to Top