The data for the chart is taken from an ObservableCollection, where each member represents sales for a
\ngiven month.<\/p>\n
The Axes<\/strong><\/p>\n The Y-axis shows an auto scale. This is the default LabelType<\/a> so we don’t need to change it. But we want custom title label and intervals of 100. Here is how we set this:<\/p>\n The X-axis requires more customization. We want to show custom labels, that’s why we must set them and change the LabelType<\/a> to show them:<\/p>\n We use the XLabelPath<\/a> property to bind the Month field in our DataSource<\/a> to the X-labels of the chart. We also set the maximum value at the X-axis and draw pointers to the labels by setting the Tick<\/a> property.<\/p>\n The Series<\/strong><\/p>\n The data for each series comes from a specific field in the DataSource<\/a> collection:<\/p>\n We want to show scatters and we use the ScatterType<\/a> property to set the type. By default the type is “None” and no scatters are drawn. We need to change that:<\/p>\n The brushes for the scatters are set with a BrushCollection:<\/p>\n Finally, don’t forget to add your LineSeries to the chart:<\/p>\n Legends<\/strong><\/p>\n In this chart we need two legends – one is for the scatters and one for the series. They are both of The legend for the scatters is docked to the bottom and is aligned in the center.<\/p>\n Here is how we set the brushes:<\/p>\n The code for the other legend is similar, but we dock it to the right and align it to the top:<\/p>\n Finally, don’t forget to add the two legends to the chart:<\/p>\n Here is the final result:<\/p>\n Line chart with scatters, two legends and custom labels. The platform is Silverlight.<\/p><\/div>\n The source code is available for download from here:<\/p>\n Download the Complete Source Code for the Sample<\/a><\/p>\n You can get the trial version of MindFusion.Charting for Silverlight from this link:<\/p>\n Download MindFusion.Charting for Silverlight Trial Version<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" In this post we are discussing how to build a line chart with multiple series, scatters in custom colors, two legends and custom labels at the X-axis. We are building the chart in Silverlight, using the MindFusion.Charting for Silverlight tool. … Continue reading lineChart1.DataSource = sales;<\/code><\/p>\nlineChart1.YAxisSettings.Interval = 100L;
\nlineChart1.YAxisSettings.TitleOffset = 10.0;
\nlineChart1.YAxisSettings.Title = \"USD\";<\/code><\/p>\nlineChart1.XAxisSettings.LabelType = LabelType.CustomText;
\nlineChart1.XAxisSettings.CustomLabelPosition = CustomLabelPosition.ChartDataPoints;<\/code><\/p>\n
\n<\/code><\/p>\nlineChart1.XAxisSettings.MaxValue = sales.Count + 1;
\nlineChart1.XAxisSettings.Tick = 5.0;<\/code><\/p>\nlSeries1.YDataPath = \"Turnover\";
\nlSeries2.YDataPath = \"Profit\";<\/code><\/p>\nlSeries1.ScatterType = ScatterType.Diamond;
\nlSeries1.ScatterSize = 20;<\/code><\/p>\nBrushCollection sBrushes1 = new BrushCollection();
\nsBrushes1.Add(new SolidColorBrush(Colors.Red));
\nsBrushes1.Add(new SolidColorBrush(Colors.Red));
\nsBrushes1.Add(new SolidColorBrush(Colors.Yellow));
\nsBrushes1.Add(new SolidColorBrush(Colors.Green));<\/code><\/p>\n
\n<\/code><\/p>\nlSeries1.ScatterFills = sBrushes1;<\/code><\/p>\nlineChart1.Series.Add(lSeries1);
\nlineChart1.Series.Add(lSeries2); <\/code><\/p>\n
\ntype SeriesLegend<\/a>, which gives us control over the brushes and labels used.<\/p>\nMindFusion.Charting.Silverlight.SeriesLegend legend =
\nnew MindFusion.Charting.Silverlight.SeriesLegend();
\nlegend.LabelsSource = new List() { \"Higher than expected\", \"Lower than expected\", \"Meets expectations\"};
\nlegend.BorderBrush = new SolidColorBrush(Colors.LightGray);
\nLayoutPanel.SetDock(legend, Dock.Bottom);
\nlegend.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;<\/code><\/p>\nBrushCollection brushes = new BrushCollection();
\nbrushes.Add(new SolidColorBrush(Colors.Green));
\nbrushes.Add(new SolidColorBrush(Colors.Red));
\nbrushes.Add(new SolidColorBrush(Colors.Yellow));
\nlegend.BrushesSource = brushes;
\nlineChart1.Legends.Add(legend);<\/code><\/p>\nLayoutPanel.SetDock(sLegend, Dock.Right);
\nsLegend.VerticalAlignment = System.Windows.VerticalAlignment.Top;<\/code><\/p>\nlineChart1.Legends.Add(legend);
\nlineChart1.Legends.Add(sLegend); <\/code><\/p>\n![\"Line](\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2013\/05\/line_chart_scatters.png\")
<\/a>