Setting RadCartesianChart background color

4 posts, 0 answers
  1. Mike
    Mike avatar
    3 posts
    Member since:
    Feb 2012

    Posted 13 Aug 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.

    Mike

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

    Posted 13 Aug 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 http://docs.telerik.com/devtools/nativescript-ui/api/classes/radcartesianchart.html. Is there a better place to look to see the available properties?

    Thanks.

    Mike

  3. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    284 posts

    Posted 14 Aug 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="http://www.nativescript.org/tns.xsd">
        <chart:RadCartesianChart height="200" backgroundColor="red" id="cartesianChart">
             <chart:ScatterSeries.horizontalAxis>
                        <chart:LinearAxis minimum="0" maximum="80" id="hAxis"/>
                    </chart:ScatterSeries.horizontalAxis>
                    <chart:ScatterSeries.verticalAxis>
                        <chart:LinearAxis id="vAxis"/>
                    </chart:ScatterSeries.verticalAxis>
        <chart:RadCartesianChart.series>
           <chart:ScatterSeries seriesName="SavingsSeries" items="{{ scatterSource }}" xProperty="Age" yProperty="Savings">             
            </chart:ScatterSeries>
             <chart:ScatterSeries seriesName="SalarySeries" items="{{ scatterSource }}" xProperty="Age" yProperty="Salary">
             </chart:ScatterSeries>
            <chart:ScatterSeries seriesName="SpendingsSeries" items="{{ scatterSource }}" xProperty="Age" yProperty="Spendings">             
            </chart:ScatterSeries>       
        </chart:RadCartesianChart.series>
         
          <!-- >> grid-line-annotations -->
         <chart:RadCartesianChart.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"/>
            </chart:RadCartesianChart.annotations>
              <!-- << grid-line-annotations -->
        </chart:RadCartesianChart>
    </Page>



    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.


    Regards,
    nikolay.tsonev
    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 Link to this post

    Thank you, Nikolay! 
Back to Top