// Xamarin Chart Examples

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.

DOWNLOAD XAMARIN CHART EXAMPLES

// Xamarin Stacked Column Chart

This example demonstrates how to create a Xamarin Stacked Column Chart in code. A Stacked Column chart allows multiple columns to be stacked one above each other, or side by side in groups. Stacking modes can be absolute, or to 100%.

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.

// Source Code

The C#/Xamarin.iOS/Xamarin.Android source code for the Xamarin Stacked Column 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?

Clone the SciChart.Xamarin.Examples from Github.
Also, the SciChart for Xamarin Trial contains the full source code for the Xamarin chart examples (link below).

DOWNLOAD THE XAMARIN CHART EXAMPLES

Xamarin Stacked Column Chart - View Source Code for this example

The SciChart Examples source code is available on Github and viewable in-app for some platforms

// StackedColumnChartViewController.cs (Xamarin.iOS)

using SciChart.iOS.Charting;

namespace Xamarin.Examples.Demo.iOS
{
    [ExampleDefinition("Stacked Column Chart", description: "Demonstrates Stacked Columns Chart", icon: ExampleIcon.StackedColumn)]
    public class StackedColumnChartViewController : SingleChartViewController<SCIChartSurface>
    {
        protected override void InitExample()
        {
            var xAxis = new SCINumericAxis();
            var yAxis = new SCINumericAxis();

            var porkData = new double[] { 10, 13, 7, 16, 4, 6, 20, 14, 16, 10, 24, 11 };
            var vealData = new double[] { 12, 17, 21, 15, 19, 18, 13, 21, 22, 20, 5, 10 };
            var tomatoesData = new double[] { 7, 30, 27, 24, 21, 15, 17, 26, 22, 28, 21, 22 };
            var cucumberData = new double[] { 16, 10, 9, 8, 22, 14, 12, 27, 25, 23, 17, 17 };
            var pepperData = new double[] { 7, 24, 21, 11, 19, 17, 14, 27, 26, 22, 28, 16 };

            var ds1 = new XyDataSeries<double, double> { SeriesName = "Pork Series" };
            var ds2 = new XyDataSeries<double, double> { SeriesName = "Veal Series" };
            var ds3 = new XyDataSeries<double, double> { SeriesName = "Tomato Series" };
            var ds4 = new XyDataSeries<double, double> { SeriesName = "Cucumber Series" };
            var ds5 = new XyDataSeries<double, double> { SeriesName = "Pepper Series" };

            const int data = 1992;
            for (var i = 0; i < porkData.Length; i++)
            {
                ds1.Append(data + i, porkData[i]);
                ds2.Append(data + i, vealData[i]);
                ds3.Append(data + i, tomatoesData[i]);
                ds4.Append(data + i, cucumberData[i]);
                ds5.Append(data + i, pepperData[i]);
            }

            var porkSeries = GetRenderableSeries(ds1, 0xFF22579D, 0xFF226FB7);
            var vealSeries = GetRenderableSeries(ds2, 0xFFBE642D, 0xFFFF9A2E);
            var tomatoSeries = GetRenderableSeries(ds3, 0xFFA33631, 0xFFDC443F);
            var cucumberSeries = GetRenderableSeries(ds4, 0xFF73953D, 0xFFAAD34F);
            var pepperSeries = GetRenderableSeries(ds5, 0xFF64458A, 0xFF8562B4);

            var verticalCollection1 = new SCIVerticallyStackedColumnsCollection();
            verticalCollection1.Add(porkSeries);
            verticalCollection1.Add(vealSeries);

            var verticalCollection2 = new SCIVerticallyStackedColumnsCollection();
            verticalCollection2.Add(tomatoSeries);
            verticalCollection2.Add(cucumberSeries);
            verticalCollection2.Add(pepperSeries);

            var columnsCollection = new SCIHorizontallyStackedColumnsCollection();
            columnsCollection.Add(verticalCollection1);
            columnsCollection.Add(verticalCollection2);

            using (Surface.SuspendUpdates())
            {
                Surface.XAxes.Add(xAxis);
                Surface.YAxes.Add(yAxis);
                Surface.RenderableSeries.Add(columnsCollection);
                Surface.ChartModifiers.Add(new SCIZoomExtentsModifier());
                Surface.ChartModifiers.Add(new SCIRolloverModifier());
            }
        }

        private SCIStackedColumnRenderableSeries GetRenderableSeries(IDataSeries dataSeries, uint strokeColor, uint fillColor)
        {
            var rSeries = new SCIStackedColumnRenderableSeries
            {
                DataSeries = dataSeries,
                FillBrushStyle = new SCISolidBrushStyle(fillColor),
                StrokeStyle = new SCISolidPenStyle(strokeColor, 1f)
            };

            SCIAnimations.WaveSeries(rSeries, 3, new SCICubicEase());

            return rSeries;
        }
    }
}

// StackedColumnChartFragment.cs (Xamarin.Android)

using Android.Graphics;
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.Fragments.Base;

namespace Xamarin.Examples.Demo.Droid.Fragments.Examples
{
    [ExampleDefinition("Stacked Column Chart", description: "Demonstrates Stacked Columns Chart", icon: ExampleIcon.StackedColumn)]
    public class StackedColumnChartFragment : 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);
            var yAxis = new NumericAxis(Activity);

            var porkData = new double[] {10, 13, 7, 16, 4, 6, 20, 14, 16, 10, 24, 11};
            var vealData = new double[] {12, 17, 21, 15, 19, 18, 13, 21, 22, 20, 5, 10};
            var tomatoesData = new double[] {7, 30, 27, 24, 21, 15, 17, 26, 22, 28, 21, 22};
            var cucumberData = new double[] {16, 10, 9, 8, 22, 14, 12, 27, 25, 23, 17, 17};
            var pepperData = new double[] {7, 24, 21, 11, 19, 17, 14, 27, 26, 22, 28, 16};

            var ds1 = new XyDataSeries<double, double> {SeriesName = "Pork Series"};
            var ds2 = new XyDataSeries<double, double> {SeriesName = "Veal Series"};
            var ds3 = new XyDataSeries<double, double> {SeriesName = "Tomato Series"};
            var ds4 = new XyDataSeries<double, double> {SeriesName = "Cucumber Series"};
            var ds5 = new XyDataSeries<double, double> {SeriesName = "Pepper Series"};

            const int data = 1992;
            for (var i = 0; i < porkData.Length; i++)
            {
                ds1.Append(data + i, porkData[i]);
                ds2.Append(data + i, vealData[i]);
                ds3.Append(data + i, tomatoesData[i]);
                ds4.Append(data + i, cucumberData[i]);
                ds5.Append(data + i, pepperData[i]);
            }

            var porkSeries = GetRenderableSeries(ds1, 0xFF22579D, 0xFF226FB7);
            var vealSeries = GetRenderableSeries(ds2, 0xFFBE642D, 0xFFFF9A2E);
            var tomatoSeries = GetRenderableSeries(ds3, 0xFFA33631, 0xFFDC443F);
            var cucumberSeries = GetRenderableSeries(ds4, 0xFF73953D, 0xFFAAD34F);
            var pepperSeries = GetRenderableSeries(ds5, 0xFF64458A, 0xFF8562B4);

            var verticalCollection1 = new VerticallyStackedColumnsCollection();
            verticalCollection1.Add(porkSeries);
            verticalCollection1.Add(vealSeries);

            var verticalCollection2 = new VerticallyStackedColumnsCollection();
            verticalCollection2.Add(tomatoSeries);
            verticalCollection2.Add(cucumberSeries);
            verticalCollection2.Add(pepperSeries);

            var columnsCollection = new HorizontallyStackedColumnsCollection();
            columnsCollection.Add(verticalCollection1);
            columnsCollection.Add(verticalCollection2);

            using (Surface.SuspendUpdates())
            {
                Surface.XAxes.Add(xAxis);
                Surface.YAxes.Add(yAxis);
                Surface.RenderableSeries.Add(columnsCollection);
                Surface.ChartModifiers = new ChartModifierCollection
                {
                    new RolloverModifier(),
                    new ZoomExtentsModifier(),
                };

                new WaveAnimatorBuilder(porkSeries) { Interpolator = new DecelerateInterpolator(), Duration = 3000, StartDelay = 350 }.Start();
                new WaveAnimatorBuilder(vealSeries) { Interpolator = new DecelerateInterpolator(), Duration = 3000, StartDelay = 350 }.Start();
                new WaveAnimatorBuilder(tomatoSeries) { Interpolator = new DecelerateInterpolator(), Duration = 3000, StartDelay = 350 }.Start();
                new WaveAnimatorBuilder(cucumberSeries) { Interpolator = new DecelerateInterpolator(), Duration = 3000, StartDelay = 350 }.Start();
                new WaveAnimatorBuilder(pepperSeries) { Interpolator = new DecelerateInterpolator(), Duration = 3000, StartDelay = 350 }.Start();
            }
        }

        private StackedColumnRenderableSeries GetRenderableSeries(IDataSeries dataSeries, uint strokeColor, uint fillColor)
        {
            return new StackedColumnRenderableSeries
            {
                DataSeries = dataSeries,
                StrokeStyle = new SolidPenStyle(Activity, strokeColor),
                FillBrushStyle = new SolidBrushStyle(fillColor)
            };
        }
    }
}

< BACK TO ALL XAMARIN CHART CHART EXAMPLES

Xamarin Stacked Column Chart

// Xamarin Chart Examples

// Xamarin Stacked Column Chart

// Source Code

// StackedColumnChartViewController.cs (Xamarin.iOS)

// StackedColumnChartFragment.cs (Xamarin.Android)

XAMARIN CHART EXAMPLES

2D Charts

Basic Chart Types

Chart Annotations

Create a Multiseries Chart

Create Custom Charts

Create Realtime Charts

Create Stock Charts

Legends

Styling and Theming

Tooltips and Hit Test

3D Charts

Axis3D

Basic Chart Types

Create Surface Mesh Chart

Realtime 3D Charts

Style 3D Chart

Tooltips and Hit Test 3D Charts

Zoom and Pan 3D Chart

Featured Apps

Medical Charts

Performance Demos

Scientific Charts