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.
SciChart ships with 8 stunning themes, which you can apply to your Xamarin charts with a single line of code. This example showcases the themes, and how they affect default cursor, zoom, axis, grid and series colors.
The C#/Xamarin.iOS/Xamarin.Android source code for the Xamarin Chart using ThemeManager 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 System.Linq;
using UIKit;
using Xamarin.Examples.Demo.Data;
using SciChart.iOS.Charting;
using System.Collections.Generic;
namespace Xamarin.Examples.Demo.iOS
{
[ExampleDefinition("Using ThemeManager", description: "Change chart theme using the ThemeManager", icon: ExampleIcon.Themes)]
public class UsingThemeManagerViewController : SingleChartWithTopPanelViewController<SCIChartSurface>
{
private static readonly Dictionary<string, string> _themesDictionary = new Dictionary<string, string>
{
{ "Black Steel", SCIThemeManager.BlackSteel },
{ "Bright Spark", SCIThemeManager.Bright_Spark },
{ "Chrome", SCIThemeManager.Chrome },
{ "Chart V4 Dark", SCIThemeManager.SciChartv4Dark },
{ "Electric", SCIThemeManager.Electric },
{ "Expression Dark", SCIThemeManager.ExpressionDark },
{ "Expression Light", SCIThemeManager.ExpressionLight },
{ "Oscilloscope", SCIThemeManager.Oscilloscope },
};
private readonly UIButton SelectThemeButton = new UIButton(UIButtonType.RoundedRect);
public override UIView ProvidePanel()
{
SelectThemeButton.SetTitle("Select Theme", UIControlState.Normal);
SelectThemeButton.TouchUpInside += (sender, args) =>
{
var actionSheetAlert = UIAlertController.Create("Select Theme", null, UIAlertControllerStyle.ActionSheet);
foreach (var themeName in _themesDictionary.Keys)
{
var themeAction = UIAlertAction.Create(themeName, UIAlertActionStyle.Default, action => SetTheme(themeName));
actionSheetAlert.AddAction(themeAction);
}
actionSheetAlert.AddAction(UIAlertAction.Create("Cansel", UIAlertActionStyle.Cancel, null));
if (actionSheetAlert.PopoverPresentationController != null)
{
actionSheetAlert.PopoverPresentationController.SourceView = View;
actionSheetAlert.PopoverPresentationController.SourceRect = ((UIButton)sender).Frame;
}
View.Window.RootViewController.PresentViewController(actionSheetAlert, true, null);
};
return SelectThemeButton;
}
protected override void InitExample()
{
var xAxis = new SCINumericAxis { GrowBy = new SCIDoubleRange(0.1, 0.1), VisibleRange = new SCIDoubleRange(150, 180) };
var yRightAxis = new SCINumericAxis
{
GrowBy = new SCIDoubleRange(0.1, 0.1),
AxisAlignment = SCIAxisAlignment.Right,
AutoRange = SCIAutoRange.Always,
AxisId = "PrimaryAxisId",
DrawMajorTicks = false,
DrawMinorTicks = false,
LabelProvider = new ThousandsLabelProvider(),
};
var yLeftAxis = new SCINumericAxis
{
GrowBy = new SCIDoubleRange(0, 3d),
AxisAlignment = SCIAxisAlignment.Left,
AutoRange = SCIAutoRange.Always,
AxisId = "SecondaryAxisId",
DrawMajorTicks = false,
DrawMinorTicks = false,
LabelProvider = new BillionsLabelProvider(),
};
var dataManager = DataManager.Instance;
var priceBars = dataManager.GetPriceDataIndu();
var mountainDataSeries = new XyDataSeries<double, double> { SeriesName = "Mountain Series" };
var lineDataSeries = new XyDataSeries<double, double> { SeriesName = "Line Series" };
var columnDataSeries = new XyDataSeries<double, long> { SeriesName = "Column Series" };
var candlestickDataSeries = new OhlcDataSeries<double, double> { SeriesName = "Candlestick Series" };
var xValues = Enumerable.Range(0, priceBars.Count).Select(x => (double)x).ToArray();
mountainDataSeries.Append(xValues, priceBars.LowData.Select(x => x - 1000d));
lineDataSeries.Append(xValues, dataManager.ComputeMovingAverage(priceBars.CloseData, 50));
columnDataSeries.Append(xValues, priceBars.VolumeData);
candlestickDataSeries.Append(xValues, priceBars.OpenData, priceBars.HighData, priceBars.LowData, priceBars.CloseData);
var mountainSeries = new SCIFastMountainRenderableSeries { DataSeries = mountainDataSeries, YAxisId = "PrimaryAxisId" };
var lineSeries = new SCIFastLineRenderableSeries { DataSeries = lineDataSeries, YAxisId = "PrimaryAxisId" };
var columnSeries = new SCIFastColumnRenderableSeries { DataSeries = columnDataSeries, YAxisId = "SecondaryAxisId" };
var candlestickSeries = new SCIFastCandlestickRenderableSeries { DataSeries = candlestickDataSeries, YAxisId = "PrimaryAxisId" };
using (Surface.SuspendUpdates())
{
Surface.XAxes.Add(xAxis);
Surface.YAxes.Add(yRightAxis);
Surface.YAxes.Add(yLeftAxis);
Surface.RenderableSeries = new SCIRenderableSeriesCollection { mountainSeries, lineSeries, columnSeries, candlestickSeries };
Surface.ChartModifiers.Add(CreateDefaultModifiers());
Surface.ChartModifiers.Add(new SCILegendModifier { ShowCheckBoxes = false });
SCIAnimations.ScaleSeriesWithZeroLine(mountainSeries, 10500, 3, new SCIElasticEase());
SCIAnimations.ScaleSeriesWithZeroLine(lineSeries, 11700, 3, new SCIElasticEase());
SCIAnimations.ScaleSeriesWithZeroLine(columnSeries, 12250, 3, new SCIElasticEase());
SCIAnimations.ScaleSeriesWithZeroLine(candlestickSeries, 10500, 3, new SCIElasticEase());
}
SetTheme(_themesDictionary.ElementAt(3).Key);
}
private void SetTheme(string themeName)
{
SCIThemeManager.ApplyTheme(Surface, _themesDictionary[themeName]);
SelectThemeButton.SetTitle(themeName, UIControlState.Normal);
}
}
}
using System.Linq;
using Android.Views.Animations;
using Android.Widget;
using SciChart.Charting.Model;
using SciChart.Charting.Model.DataSeries;
using SciChart.Charting.Modifiers;
using SciChart.Charting.Themes;
using SciChart.Charting.Visuals;
using SciChart.Charting.Visuals.Animations;
using SciChart.Charting.Visuals.Axes;
using SciChart.Charting.Visuals.RenderableSeries;
using SciChart.Data.Model;
using Xamarin.Examples.Demo.Data;
using Xamarin.Examples.Demo;
using Xamarin.Examples.Demo.Droid.Components;
using Xamarin.Examples.Demo.Droid.Fragments.Base;
namespace Xamarin.Examples.Demo.Droid.Fragments.Examples
{
[ExampleDefinition("Using ThemeManager", description:"Change chart theme using the ThemeManager", icon: ExampleIcon.Themes)]
public class UsingThemeManagerFragment : ExampleBaseFragment
{
private const int BlackSteel = 0;
private const int BrightSpark = 1;
private const int Chrome = 2;
private const int Electric = 3;
private const int ExpressionDark = 4;
private const int ExpressionLight = 5;
private const int Oscilloscope = 6;
private const int SciChartV4Dark = 7;
public SciChartSurface Surface => View.FindViewById<SciChartSurface>(Resource.Id.chart);
public Spinner ThemeSelector => View.FindViewById<Spinner>(Resource.Id.themeSelector);
public override int ExampleLayoutId => Resource.Layout.Example_Theme_Provider_Chart_Fragment;
protected override void InitExample()
{
InitializeUIHandlers();
var xAxis = new NumericAxis(Activity) {GrowBy = new DoubleRange(0.1, 0.1), VisibleRange = new DoubleRange(150, 180)};
var yRightAxis = new NumericAxis(Activity)
{
GrowBy = new DoubleRange(0.1, 0.1),
AxisAlignment = AxisAlignment.Right,
AutoRange = AutoRange.Always,
AxisId = "PrimaryAxisId",
DrawMajorTicks = false,
DrawMinorTicks = false,
LabelProvider = new ThousandsLabelProvider(),
};
var yLeftAxis = new NumericAxis(Activity)
{
GrowBy = new DoubleRange(0, 3d),
AxisAlignment = AxisAlignment.Left,
AutoRange = AutoRange.Always,
AxisId = "SecondaryAxisId",
DrawMajorTicks = false,
DrawMinorTicks = false,
LabelProvider = new BillionsLabelProvider(),
};
var dataManager = DataManager.Instance;
var priceBars = dataManager.GetPriceDataIndu();
var mountainDataSeries = new XyDataSeries<double, double> {SeriesName = "Mountain Series"};
var lineDataSeries = new XyDataSeries<double, double> {SeriesName = "Line Series" };
var columnDataSeries = new XyDataSeries<double, long> {SeriesName = "Column Series" };
var candlestickDataSeries = new OhlcDataSeries<double, double> {SeriesName = "Candlestick Series"};
var xValues = Enumerable.Range(0, priceBars.Count).Select(x => (double) x).ToArray();
mountainDataSeries.Append(xValues, priceBars.LowData.Select(x => x - 1000d));
lineDataSeries.Append(xValues, dataManager.ComputeMovingAverage(priceBars.CloseData, 50));
columnDataSeries.Append(xValues, priceBars.VolumeData);
candlestickDataSeries.Append(xValues, priceBars.OpenData, priceBars.HighData, priceBars.LowData, priceBars.CloseData);
var mountainSeries = new FastMountainRenderableSeries {DataSeries = mountainDataSeries, YAxisId = "PrimaryAxisId"};
var lineSeries = new FastLineRenderableSeries {DataSeries = lineDataSeries, YAxisId = "PrimaryAxisId"};
var columnSeries = new FastColumnRenderableSeries {DataSeries = columnDataSeries, YAxisId = "SecondaryAxisId" };
var candlestickSeries = new FastCandlestickRenderableSeries {DataSeries = candlestickDataSeries, YAxisId = "PrimaryAxisId"};
var legendModifier = new LegendModifier(Activity);
legendModifier.SetShowCheckboxes(false);
using (Surface.SuspendUpdates())
{
Surface.XAxes.Add(xAxis);
Surface.YAxes.Add(yRightAxis);
Surface.YAxes.Add(yLeftAxis);
Surface.RenderableSeries.Add(mountainSeries);
Surface.RenderableSeries.Add(lineSeries);
Surface.RenderableSeries.Add(columnSeries);
Surface.RenderableSeries.Add(candlestickSeries);
Surface.ChartModifiers = new ChartModifierCollection
{
legendModifier,
new CursorModifier(),
new ZoomExtentsModifier(),
};
new ScaleAnimatorBuilder(mountainSeries, 10500d) { Interpolator = new OvershootInterpolator(), Duration = 1000, StartDelay = 600 }.Start();
new ScaleAnimatorBuilder(candlestickSeries, 11700d) { Interpolator = new OvershootInterpolator(), Duration = 1000, StartDelay = 600 }.Start();
new ScaleAnimatorBuilder(lineSeries, 12250d) { Interpolator = new OvershootInterpolator(), Duration = 1000, StartDelay = 600 }.Start();
new ScaleAnimatorBuilder(columnSeries, 10500d) { Interpolator = new OvershootInterpolator(), Duration = 1000, StartDelay = 600 }.Start();
}
}
private void InitializeUIHandlers()
{
ThemeSelector.Adapter = new SpinnerStringAdapter(Activity, Resource.Array.style_list);
ThemeSelector.SetSelection(7);
ThemeSelector.ItemSelected += (sender, args) => { SetTheme(args.Position); };
}
private void SetTheme(int position)
{
int themeId;
switch (position)
{
case BlackSteel:
themeId = Resource.Style.SciChart_BlackSteel;
break;
case BrightSpark:
themeId = Resource.Style.SciChart_Bright_Spark;
break;
case Chrome:
themeId = Resource.Style.SciChart_ChromeStyle;
break;
case Electric:
themeId = Resource.Style.SciChart_ElectricStyle;
break;
case ExpressionDark:
themeId = Resource.Style.SciChart_ExpressionDarkStyle;
break;
case ExpressionLight:
themeId = Resource.Style.SciChart_ExpressionLightStyle;
break;
case Oscilloscope:
themeId = Resource.Style.SciChart_OscilloscopeStyle;
break;
case SciChartV4Dark:
themeId = Resource.Style.SciChart_SciChartv4DarkStyle;
break;
default:
themeId = ThemeManager.DefaultTheme;
break;
}
Surface.Theme = themeId;
}
}
}