This question is locked. New answers and comments are not allowed.
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
3 Answers, 1 is accepted
0
Mike
Top achievements
Rank 1
answered on 13 Aug 2017, 03:00 PM
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
0
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:
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
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.
0
Mike
Top achievements
Rank 1
answered on 14 Aug 2017, 12:51 PM
Thank you, Nikolay!