Bubble / ScatterBubble colors and Axis

2 posts, 0 answers
  1. Douglas
    Douglas avatar
    16 posts
    Member since:
    Apr 2017

    Posted 14 Nov Link to this post

    I'm using a scatter bubble chart and I would like to specify the bubble colors.  I can't find any styling documentation for bubbles.

    Also, I have -3<x<3 and -3<y<3 values.  I would like the axis to be through the zeros instead of the minimums.  Is that possible?

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    324 posts

    Posted 15 Nov Link to this post

    Hello Douglas,

    You can customize the colors of your bubbles by using palletes.

    For example:
    <chart:RadCartesianChart>
        <chart:RadCartesianChart.horizontalAxis>
            <chart:LinearAxis/>
        </chart:RadCartesianChart.horizontalAxis>
        <chart:RadCartesianChart.verticalAxis>
            <chart:LinearAxis/>
        </chart:RadCartesianChart.verticalAxis>
     
        <chart:RadCartesianChart.series>
            <chart:ScatterBubbleSeries  items="{{ scatterSource }}" bubbleScale="5" xProperty="Age" yProperty="Salary" bubbleSizeProperty="Impact" />            
            <chart:ScatterBubbleSeries  items="{{ scatterSource }}" bubbleScale="5" xProperty="Age" yProperty="Spendings" bubbleSizeProperty="Impact" /> 
            <chart:ScatterBubbleSeries seriesName="MyScatter"  items="{{ scatterSource }}" bubbleScale="5" xProperty="Age" yProperty="Savings" bubbleSizeProperty="Impact" />
        </chart:RadCartesianChart.series>
     
        <chart:RadCartesianChart.palettes>
            <chart:Palette seriesName="MyScatter">
                <chart:Palette.entries>
                    <chart:PaletteEntry fillColor="#80FCE49D" strokeColor="#80E2A1F8"/>
                </chart:Palette.entries>
            </chart:Palette>
        </chart:RadCartesianChart.palettes>
    </chart:RadCartesianChart>


    In the snippet above (based on this sample) we are assigning name to the series we want to customize via seriesName and then using Pallette we are assigning custom fillColor and strokeColor.

    Chaning the default bottom position of your X value is not supported.

    Regards,
    Nikolay Iliev
    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.
Back to Top