I want to modify the style of scatter series datapoint: such as size and color.
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
Thank you very much!
Then, I have a another question, How can I selecte a point in the scatter series; which event I should use?
You can hook up the DataItemMouseLeftButtonDown event on your Chart. There, you can figure out the shape that you're clicking on and perform any actions you need to. On my event I was changing the fill of the Scatter Marker.
private void Chart1_DataItemMouseLeftButtonDown(object sender, DataItemMouseEventArgs e) { if (e.Element as Ellipse != null) { Ellipse myEllipse = (Ellipse)e.Element; myEllipse.Fill = new SolidColorBrush(Colors.Blue); } }