Setting RadCartesianChart background color

[Mike]

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

[Mike]

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

[Nikolay Tsonev]

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

[Mike]

Thank you, Nikolay!