Bar chart details

[Bank Van Breda]

I'm trying to reproduce following designed version

DesignVersion

Screen Shot 2018-04-19 at 11.13.41.png (41.55 KiB) Viewed 20902 times

Current status

SteemaVersion

Screen Shot 2018-04-19 at 11.13.52.png (58.31 KiB) Viewed 20900 times

I'm working with Xamarin Forms version
Some questions:
1. I'm unable to remove the grid dashes... tried Chart.Axes.Left.Grid.Visible = false without any luck
2. What is the best way to have tailored data labels that are different from the actual double values for the bar? So example show +10,26 instead of the real 10,26 value.
3. Same for the left labels, instead of 5 show 5%
4. Why aren't all bar labels 'above' the actual bar? ( cfr 9,66 label )

[Sandra]

Hello Bank Van Breda,

I'm working with it. We try to give you an answer on Monday.

Thanks in advance

[Sandra]

Hello Bank,

Sorry for the delay.
The code below shows you how can do all your request:

Code: Select all

    ChartView tChart1;

		public MainPage()
		{
			InitializeComponent();

			tChart1 = new ChartView();
			tChart1.Chart.Panning.Allow = ScrollModes.None;
			tChart1.Chart.Panel.Gradient.Visible = false;
			tChart1.Chart.Panel.Color = Color.White;
			tChart1.Chart.Walls.Back.Visible = false;
			tChart1.Chart.Header.Visible = false;
			tChart1.Chart.Legend.Visible = false;
			tChart1.Chart.Aspect.View3D = false;
			Steema.TeeChart.Styles.Bar bar1 = new Steema.TeeChart.Styles.Bar(tChart1.Chart);
			for (int i = 0; i < 5; i++)
			{
				bar1.Add(i, i * 5);
			}
			bar1.Color = Color.Green;
			bar1.Marks.Visible = true;
			bar1.Marks.Transparent = true;
			bar1.Marks.Pen.Visible = false;
			bar1.Marks.TailStyle = Steema.TeeChart.Styles.MarksTail.None;
			bar1.Marks.Arrow.Visible = false;
			bar1.Marks.Font.Size = 18;
			bar1.GetSeriesMark += Bar1_GetSeriesMark;
			tChart1.Chart.Axes.Left.Labels.Style = Steema.TeeChart.AxisLabelStyle.Text;
			tChart1.Chart.Axes.Left.Labels.Font.Size = 18;
			tChart1.Chart.Axes.Left.Ticks.Visible = true;
			tChart1.Chart.Axes.Left.MinorTicks.Visible = true;
			tChart1.Chart.Axes.Left.AxisPen.Visible = true;
			tChart1.Chart.Axes.Left.Grid.Visible = false;
			tChart1.Chart.Axes.Bottom.Grid.Visible = false;
			tChart1.Chart.Axes.Bottom.Labels.Font.Size = 18;
			tChart1.Chart.GetAxisLabel += Chart_GetAxisLabel;
			tChart1.Chart.Panel.MarginLeft = 20;

			tChart1.WidthRequest = 650;
			tChart1.HeightRequest = 350;

		
			Content = new StackLayout
			{
				Children =
									{
										tChart1
									},
				VerticalOptions = LayoutOptions.CenterAndExpand,
				HorizontalOptions = LayoutOptions.CenterAndExpand,
			};

		}

		private void Chart_GetAxisLabel(object sender, GetAxisLabelEventArgs e)
		{
			if (sender == tChart1.Chart.Axes.Left)
			{
				if (e.ValueIndex != -1)
				{
					e.LabelText = e.Series.YValues[e.ValueIndex].ToString() + "%";
				}
			}
		}


		private void Bar1_GetSeriesMark(Steema.TeeChart.Styles.Series series, Steema.TeeChart.Styles.GetSeriesMarkEventArgs e)
		{
			e.MarkText = "+ " + e.MarkText;
		}

Hoping this works in your end, otherwise don't hesistate to contact us.

Thanks in advance
Regards

[Bank Van Breda]

Thanks Sandra, this is a great example that matches our needs!

[Bank Van Breda]

Hey Sandra,

Sorry still 1 small detail questions.

On Android, all Marks have a yellow back color. Even though I added bar.Marks.BackColor = Color.Transparent;
( On iOS these look good )

Screen Shot 2018-04-24 at 17.19.37.png (41.81 KiB) Viewed 20867 times

[Sandra]

Hello Bank Van Breda,

I would like inform you the problem you're experiencing doesn't occur for us using latest TeeChart for Xamarin.Forms Build 4.1.2018.01040 and using same code we above.

Do you confirm us if you're using the latest TeeChart for Xamarin.Forms v2018? If you're working with latest version, Could you send us your project because we can reproduce the problem here and try to find a solution for you.

Thanks in advance

[Bank Van Breda]

Hey Sandra,

Ok, seems I did a small error in implementing the code.
So I used bar.Marks.BackColor = Color.Transparent; instead of bar.Marks.Transparent = true;

The yellow background is gone when I add bar.Marks.Transparent = true;

Thanks again for the support!