Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Liu
230
How to modify the scatter series datapoint style
posted

I want to modify the style of scatter series datapoint: such as size and color.

Parents
No Data
Reply
  • 1134
    Verified Answer
    posted

    Hi liuyunlynn,

    You can change the color of a Scatter series by simply setting the Fill property on the series to whatever color you like.  You can also change the size of the Scatter markers by setting the MarkerSize property on the Series marker.  Here's what I did:

    <igChart:XamWebChart x:Name="Chart1">
            <igChart:XamWebChart.Series>
                <igChart:Series ChartType="Scatter" Fill="Orange">
                    <igChart:Series.Marker>
                        <igChart:Marker Type="Circle" MarkerSize="35"/>
                    </igChart:Series.Marker>
                    <igChart:Series.DataPoints>
                        <igChart:DataPoint>
                            <igChart:DataPoint.ChartParameters>
                                <igChart:ChartParameter Type="ValueX" Value="35"/>
                                <igChart:ChartParameter Type="ValueY" Value="45"/>
                            </igChart:DataPoint.ChartParameters>
                        </igChart:DataPoint>
                        <igChart:DataPoint>
                            <igChart:DataPoint.ChartParameters>
                                <igChart:ChartParameter Type="ValueX" Value="22"/>
                                <igChart:ChartParameter Type="ValueY" Value="44"/>
                            </igChart:DataPoint.ChartParameters>
                        </igChart:DataPoint>
                        <igChart:DataPoint>
                            <igChart:DataPoint.ChartParameters>
                                <igChart:ChartParameter Type="ValueX" Value="75"/>
                                <igChart:ChartParameter Type="ValueY" Value="33"/>
                            </igChart:DataPoint.ChartParameters>
                        </igChart:DataPoint>
                    </igChart:Series.DataPoints>
                </igChart:Series>
            </igChart:XamWebChart.Series>
            <igChart:XamWebChart.Axes>
                <igChart:Axis AxisType="PrimaryX" x:Name="xAxis"/>
                <igChart:Axis AxisType="PrimaryY" x:Name="yAxis"/>
            </igChart:XamWebChart.Axes>
        </igChart:XamWebChart>

    As you can see, I set the Fill property to Orange.  I also created a Marker on the series with a MarkerType of Circle and set its MarkerSize to 35 to make the each of the points of the series bigger.

    Hope this helps!

    Marisa

Children