The Y-axes, as all axes in the chart are an instance of the Axis class and are added to the appropriate collection property. The Axis class defines all types of useful properties needed to customize an axis. We define the three axes in XAML:<\/p>\n
<chart:linechart.yaxes<\/span>>\n<\/span> <chart:axescollection<\/span>>\n<\/span> <chart:axis<\/span> minvalue<\/span>=\"0<\/a>\" interval<\/span>=\"5<\/a>\" maxvalue<\/span>=\"60<\/a>\" labelformat<\/span>=\"F0<\/a>\" tick<\/span>=\"3<\/a>\" title<\/span>=\"kWh\/day<\/a>\" titlerotationangle<\/span>=\"270<\/a>\" labelstroke<\/span>=\"Red<\/a>\" titlestroke<\/span>=\"Red<\/a>\"><\/chart:axis<\/span>>\n<\/span> <chart:axis<\/span> minvalue<\/span>=\"0<\/a>\" interval<\/span>=\"300<\/a>\" maxvalue<\/span>=\"2100<\/a>\" title<\/span>=\"Capital (USD)<\/a>\" tick<\/span>=\"3<\/a>\" titlerotationangle<\/span>=\"270<\/a>\" labelstroke<\/span>=\"Purple<\/a>\" titlestroke<\/span>=\"Purple<\/a>\"><\/chart:axis<\/span>>\n<\/span> <chart:axis<\/span> minvalue<\/span>=\"100<\/a>\" interval<\/span>=\"2.5<\/a>\" maxvalue<\/span>=\"130<\/a>\" title<\/span>=\"Work Productivity (%)<\/a>\" customlabelposition<\/span>=\"AutoScalePoints<\/a>\" axiscrossingpoint<\/span>=\"100.0<\/a>\" labeltype<\/span>=\"CustomText<\/a>\" tick<\/span>=\"3<\/a>\" titlerotationangle<\/span>=\"270<\/a>\" labelstroke<\/span>=\"Green<\/a>\" titlestroke<\/span>=\"Green<\/a>\"><\/chart:axis<\/span>>\n<\/span> <\/chart:axescollection<\/span>>\n<\/span><\/chart:linechart.yaxes<\/span>><\/pre>\nThe property names easily describe what is set: the minimum and maximum values on each of the three axes, the title, the stroke for the labels and the title, the interval and the length of the axis ticks. Let’s note that the type of labels for the last Y-axis is “CustomText” – this means we will specify the labels explicitly rather than allow the control to generate them as with the other two axes – they don’t set a label type and the default value (the auto scale) is rendered.<\/p>\n
Here is how we define the labels:<\/p>\n
double start = 100.0;\n\n \/\/130 is the last number at the axis\n while (start <= 130)\n {\n string l = start.ToString(\"F1\") + \"%\";\n chart.YAxes[2].Labels.Add(l);\n start += 2.5;\n }\n<\/pre>\nII. The Y2 Axis<\/strong><\/p>\nThe Y2-axis is just one and it is entirely declared in XAML:<\/p>\n
<chart:linechart.y2axes<\/span>>\n<\/span> <chart:axescollection<\/span>>\n<\/span> <chart:axis<\/span> minvalue<\/span>=\"0<\/a>\" interval<\/span>=\"1000<\/a>\" maxvalue<\/span>=\"12000<\/a>\" tick<\/span>=\"3<\/a>\" labelformat<\/span>=\"F0<\/a>\" titlerotationangle<\/span>=\"270<\/a>\" title<\/span>=\"Units<\/a>\"><\/chart:axis<\/span>>\n<\/span> <\/chart:axescollection<\/span>>\n<\/span><\/chart:linechart.y2axes<\/span>><\/pre>\nThe label format is set with the standard .NET numeric strings – in this case it is a floating number without trailing zeros. In this axis, as well in the other Y-axes you might have noticed that we use the TitleRotationAngle property. This property rotates the title label at an arbitrary angle between 0 and 360. In our case we want the label drawn vertically, to conserve space.<\/p>\n
III. The Series<\/strong><\/p>\nThe series are created in code. They specify scatter type because we want each series to have markers at data points. The YAxis property specifies the Y-axis, which a given Series is bound to. Finally, we specify the tool tip type because we want to have a tool tip when the mouse hovers a data point.<\/p>\n
LineSeries series0 = new LineSeries();\n series0.YAxis = chart.YAxes[0];\n series0.ScatterType = ScatterType.Square;\n series0.ScatterFills = new BrushCollection() { Brushes.Pink };\n series0.ScatterStrokes = new BrushCollection() { Brushes.Red };\n series0.Strokes = new BrushCollection() { Brushes.Red };\n series0.ToolTipType = ToolTipType.ChartData;\n<\/pre>\nThe data is random generated numbers. We use the Axis.XData and Axis.YData properties to set it.<\/p>\n
for (int i = 0; i < 30; i++)\n {\n series0.XData.Add(i * 6);\n data1.Add(rand.NextDouble() * 60.0); \n }\n\n data1.Sort();\n series0.YData = new DoubleCollection(data1);\n \/\/don't forget to add the series\n chart.Series.Add(series0);\n<\/pre>\nLast but not least – don’t forget to add the series to the Series collection property of the chart. With that our chart is ready – here is the result:<\/p>\n
![\"Charting](\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2015\/12\/wpf_chart_production.png\")
<\/a>Charting for WPF: Multiple Axes and Series<\/p><\/div>\n
You can download the sample with the chart libraries from here:<\/p>\n
WPF Chart With Multiple Axes Sample Download<\/a><\/p>\nIf you have any questions regarding the chart component use the forum,<\/a> email<\/a> or the help desk<\/a> to contact MindFusion. More information about Charting for WPF, which includes a premium 3D charting library and a Real time charting library optimized to handle huge data sets can be found here.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"A common scenario when building charts is the ability to render multiple series bound to multiple axes, each one with its own scale. To deal with this issue, MindFusion.Charting for WPF control has added support for multiple axes of all … Continue reading