SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
Please note! These examples are new to SciChart Mobile v3 release! SciChart iOS & Android ship with Xamarin.iOS and Xamarin.Android bindings around our native iOS & Android Chart controls, allowing you to create fast & feature rich charts to your Xamarin applications. We include ~90 native iOS examples and 90 Android examples, but now also ~60 Xamarin Chart Examples to help you get started with SciChart. You can download the source for our Xamarin Chart Examples from Github, or browse the source code below.
This example demonstrates how to create a Xamarin Stacked Bar Chart in code. A Stacked Bar chart is a Stacked Column chart rotated 90 degrees, so that the columns are rendered horizontally. In order to achieve this effect, we create a Stacked Column chart, then use the XAxis and YAxis alignment to rotate the chart. The columns can be stacked above each other, or side by side.
See Native iOS/Android Documentation on how to use this type here:
Tip!
Do you need to change the width of a column? Try calling the setDataPointWidth() method for Android or use dataPointWidth propery in iOS with passing in any number from 0.0 to 1.0. This alters how much space a column takes up.
The C#/Xamarin.iOS/Xamarin.Android source code for the Xamarin Stacked Bar Chart example is included below (Scroll down!).
Did you know you can also view the source code from one of the following sources as well?
using CoreGraphics;
using SciChart.iOS.Charting;
namespace Xamarin.Examples.Demo.iOS
{
[ExampleDefinition("Stacked Bar Chart", description: "Demonstrates a Stacked Bar Chart", icon: ExampleIcon.StackedBar)]
public class StackedBarChartViewController : SingleChartViewController<SCIChartSurface>
{
protected override void InitExample()
{
var xAxis = new SCINumericAxis { AxisAlignment = SCIAxisAlignment.Left };
var yAxis = new SCINumericAxis { AxisAlignment = SCIAxisAlignment.Bottom, FlipCoordinates = true };
var yValues1 = new[] { 0.0, 0.1, 0.2, 0.4, 0.8, 1.1, 1.5, 2.4, 4.6, 8.1, 11.7, 14.4, 16.0, 13.7, 10.1, 6.4, 3.5, 2.5, 5.4, 6.4, 7.1, 8.0, 9.0 };
var yValues2 = new[] { 2.0, 10.1, 10.2, 10.4, 10.8, 1.1, 11.5, 3.4, 4.6, 0.1, 1.7, 14.4, 16.0, 13.7, 10.1, 6.4, 3.5, 2.5, 1.4, 0.4, 10.1, 0.0, 0.0 };
var yValues3 = new[] { 20.0, 4.1, 4.2, 10.4, 10.8, 1.1, 11.5, 3.4, 4.6, 5.1, 5.7, 14.4, 16.0, 13.7, 10.1, 6.4, 3.5, 2.5, 1.4, 10.4, 8.1, 10.0, 15.0 };
var ds1 = new XyDataSeries<double, double> { SeriesName = "data 1" };
var ds2 = new XyDataSeries<double, double> { SeriesName = "data 2" };
var ds3 = new XyDataSeries<double, double> { SeriesName = "data 3" };
for (var i = 0; i < yValues1.Length; i++)
{
ds1.Append(i, yValues1[i]);
ds2.Append(i, yValues2[i]);
ds3.Append(i, yValues3[i]);
}
var series1 = GetRenderableSeries(ds1, 0xFF567893, 0xFF567893, 0xFF3D5568);
var series2 = GetRenderableSeries(ds2, 0xFFACBCCA, 0xFFACBCCA, 0xFF439AAF);
var series3 = GetRenderableSeries(ds3, 0xFFDBE0E1, 0xFFDBE0E1, 0xFFB6C1C3);
var columnsCollection = new SCIVerticallyStackedColumnsCollection();
columnsCollection.Add(series1);
columnsCollection.Add(series2);
columnsCollection.Add(series3);
using (Surface.SuspendUpdates())
{
Surface.XAxes.Add(xAxis);
Surface.YAxes.Add(yAxis);
Surface.RenderableSeries.Add(columnsCollection);
Surface.ChartModifiers = new SCIChartModifierCollection { new SCICursorModifier(), new SCIZoomExtentsModifier() };
}
}
private SCIStackedColumnRenderableSeries GetRenderableSeries(IDataSeries dataSeries, uint strokeColor, uint fillColorStart, uint fillColorEnd)
{
var rSeries = new SCIStackedColumnRenderableSeries
{
DataSeries = dataSeries,
DataPointWidth = 0.8,
StrokeStyle = new SCISolidPenStyle(strokeColor, 1f),
FillBrushStyle = new SCILinearGradientBrushStyle(new CGPoint(0.5, 0.0), new CGPoint(0.5, 1.0), fillColorStart, fillColorEnd)
};
SCIAnimations.WaveSeries(rSeries, 3, new SCICubicEase());
return rSeries;
}
}
}
using Android.Views.Animations;
using SciChart.Charting.Model;
using SciChart.Charting.Model.DataSeries;
using SciChart.Charting.Modifiers;
using SciChart.Charting.Visuals;
using SciChart.Charting.Visuals.Animations;
using SciChart.Charting.Visuals.Axes;
using SciChart.Charting.Visuals.RenderableSeries;
using SciChart.Drawing.Common;
using Xamarin.Examples.Demo;
using Xamarin.Examples.Demo.Droid.Extensions;
using Xamarin.Examples.Demo.Droid.Fragments.Base;
namespace Xamarin.Examples.Demo.Droid.Fragments.Examples
{
[ExampleDefinition("Stacked Bar Chart", description: "Demonstrates a Stacked Bar Chart", icon: ExampleIcon.StackedBar)]
public class StackedBarChartFragment : ExampleBaseFragment
{
public SciChartSurface Surface => View.FindViewById<SciChartSurface>(Resource.Id.chart);
public override int ExampleLayoutId => Resource.Layout.Example_Single_Chart_Fragment;
protected override void InitExample()
{
var xAxis = new NumericAxis(Activity) {AxisAlignment = AxisAlignment.Left};
var yAxis = new NumericAxis(Activity) {AxisAlignment = AxisAlignment.Bottom, FlipCoordinates = true};
var yValues1 = new[] {0.0, 0.1, 0.2, 0.4, 0.8, 1.1, 1.5, 2.4, 4.6, 8.1, 11.7, 14.4, 16.0, 13.7, 10.1, 6.4, 3.5, 2.5, 5.4, 6.4, 7.1, 8.0, 9.0};
var yValues2 = new[] {2.0, 10.1, 10.2, 10.4, 10.8, 1.1, 11.5, 3.4, 4.6, 0.1, 1.7, 14.4, 16.0, 13.7, 10.1, 6.4, 3.5, 2.5, 1.4, 0.4, 10.1, 0.0, 0.0};
var yValues3 = new[] {20.0, 4.1, 4.2, 10.4, 10.8, 1.1, 11.5, 3.4, 4.6, 5.1, 5.7, 14.4, 16.0, 13.7, 10.1, 6.4, 3.5, 2.5, 1.4, 10.4, 8.1, 10.0, 15.0};
var ds1 = new XyDataSeries<double, double> {SeriesName = "data 1"};
var ds2 = new XyDataSeries<double, double> {SeriesName = "data 2"};
var ds3 = new XyDataSeries<double, double> {SeriesName = "data 3"};
for (var i = 0; i < yValues1.Length; i++)
{
ds1.Append(i, yValues1[i]);
ds2.Append(i, yValues2[i]);
ds3.Append(i, yValues3[i]);
}
var series1 = GetRenderableSeries(ds1, 0xFF567893, 0xFF567893, 0xFF3D5568);
var series2 = GetRenderableSeries(ds2, 0xFFACBCCA, 0xFFACBCCA, 0xFF439AAF);
var series3 = GetRenderableSeries(ds3, 0xFFDBE0E1, 0xFFDBE0E1, 0xFFB6C1C3);
var columnsCollection = new VerticallyStackedColumnsCollection();
columnsCollection.Add(series1);
columnsCollection.Add(series2);
columnsCollection.Add(series3);
using (Surface.SuspendUpdates())
{
Surface.XAxes.Add(xAxis);
Surface.YAxes.Add(yAxis);
Surface.RenderableSeries.Add(columnsCollection);
Surface.ChartModifiers = new ChartModifierCollection
{
new CursorModifier(),
new ZoomExtentsModifier()
};
new WaveAnimatorBuilder(series1) { Interpolator = new DecelerateInterpolator(), Duration = 3000, StartDelay = 350 }.Start();
new WaveAnimatorBuilder(series2) { Interpolator = new DecelerateInterpolator(), Duration = 3000, StartDelay = 350 }.Start();
new WaveAnimatorBuilder(series3) { Interpolator = new DecelerateInterpolator(), Duration = 3000, StartDelay = 350 }.Start();
}
}
private StackedColumnRenderableSeries GetRenderableSeries(IDataSeries dataSeries, uint strokeColor, uint fillColorStart, uint fillColorEbd)
{
return new StackedColumnRenderableSeries
{
DataSeries = dataSeries,
DataPointWidth = 0.8,
StrokeStyle = new SolidPenStyle(strokeColor, 1f.ToDip(Activity)),
FillBrushStyle = new LinearGradientBrushStyle(0,0,0,1, fillColorStart, fillColorEbd)
};
}
}
}