beto-rodriguez / LiveCharts2

Simple, flexible, interactive & powerful charts, maps and gauges for .Net, LiveCharts2 can now practically run everywhere Maui, Uno Platform, Blazor-wasm, WPF, WinForms, Xamarin, Avalonia, WinUI, UWP.
https://livecharts.dev
MIT License
4.13k stars 537 forks source link

Axis Label display control with a shared axis #329

Closed SuperDaveOsbourne closed 1 year ago

SuperDaveOsbourne commented 2 years ago

I have gone through the demos and don't find a clear way of stating if the charts X Y axis labels should be displayed. The examples do show that you can do it but I did spend considerable time looking and didn't find an answer. In this example I just want the Candlestick control to have Y Axis labels and the Volume bars to have both X and Y.

Winforms .Net 6 with LiveCharts 2.0.0-beta.90

Code ` //Begin example private void BtnDrawAllCharts(object sender, EventArgs e) { CandleStickChart.Series = FinData; CandleStickChart.ZoomMode = ZoomAndPanMode.X; CandleStickChart.XAxes = SharedXAxis; CandleStickChart.BackColor = Color.White; VolumeBarsChart.Series = VolumeBars; VolumeBarsChart.ZoomMode = ZoomAndPanMode.X; VolumeBarsChart.XAxes = SharedXAxis; VolumeBarsChart.BackColor = Color.White; CandleStickChart.Update(); VolumeBarsChart.Update(); } private Axis[] SharedXAxis { get; set; } = new[] { new Axis { LabelsRotation = 90, Labeler = value => new DateTime((long)value).ToString("M/d"), //set the unit width of the axis to "days" //since our X axis is of type date time and //the interval between our points is in days UnitWidth = TimeSpan.FromDays(1).Ticks, } }; private IEnumerable VolumeBars { get; set; } = new ObservableCollection { new ColumnSeries { Name= "V", MaxBarWidth = 20, DataPadding = new LvcPoint(1,1), Stroke = new SolidColorPaint{ Color = SKColors.Blue}, Values = new ObservableCollection { new DateTimePoint { DateTime = new DateTime(2021, 1, 1), Value = 3.5 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 2), Value = 4.2 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 3), Value = 6 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 4), Value = 5 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 5), Value = 3 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 6), Value = 5 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 7), Value = 8 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 8), Value = 6 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 9), Value = 2 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 10), Value = 1 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 11), Value = 9 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 12), Value = 12 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 13), Value = 3 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 14), Value = 2 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 15), Value = 13 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 16), Value = 3 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 17), Value = 4 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 18), Value = 5 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 19), Value = 12 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 20), Value = 2 }, new DateTimePoint { DateTime = new DateTime(2021, 1, 21), Value = 7 } }, } }; private IEnumerable FinData { get; set; } = new ObservableCollection { new CandlesticksSeries { Name= "AAPL", //DataLabelsSize = 20, //DataLabelsPaint = new SolidColorPaint(SKColors.Blue), //DataLabelsPosition = LiveChartsCore.Measure.DataLabelsPosition.Top, //DataLabelsRotation = 0, //DataLabelsFormatter = (point) => $"{2}", UpFill = new SolidColorPaint{ Color = SKColors.Black }, DownFill = new SolidColorPaint{ Color = SKColors.Red}, UpStroke = new SolidColorPaint{ Color = SKColors.Red}, DownStroke = new SolidColorPaint{ Color = SKColors.Black }, DataPadding = new LvcPoint(1,1), MaxBarWidth = 20, Values = new ObservableCollection { // date, high, open, close, low , volume new(new DateTime(2021, 1, 1), 523, 500, 450, 400), new(new DateTime(2021, 1, 2), 500, 450, 425, 400), new(new DateTime(2021, 1, 3), 490, 425, 400, 380), new(new DateTime(2021, 1, 4), 420, 400, 420, 380), new(new DateTime(2021, 1, 5), 520, 420, 490, 400), new(new DateTime(2021, 1, 6), 580, 490, 560, 440), new(new DateTime(2021, 1, 7), 570, 560, 350, 340), new(new DateTime(2021, 1, 8), 380, 350, 380, 330), new(new DateTime(2021, 1, 9), 440, 380, 420, 350), new(new DateTime(2021, 1, 10), 490, 420, 460, 400), new(new DateTime(2021, 1, 11), 520, 460, 510, 460), new(new DateTime(2021, 1, 12), 580, 510, 560, 500), new(new DateTime(2021, 1, 13), 600, 560, 540, 510), new(new DateTime(2021, 1, 14), 580, 540, 520, 500), new(new DateTime(2021, 1, 15), 580, 520, 560, 520), new(new DateTime(2021, 1, 16), 590, 560, 580, 520), new(new DateTime(2021, 1, 17), 650, 580, 630, 550), new(new DateTime(2021, 1, 18), 680, 630, 650, 600), new(new DateTime(2021, 1, 19), 670, 650, 600, 570), new(new DateTime(2021, 1, 20), 640, 600, 610, 560), new(new DateTime(2021, 1, 21), 630, 610, 630, 590), } } };`
Chart Image ![PutCall](https://user-images.githubusercontent.com/4176416/145251064-b29c75f9-f522-4bcb-836f-9df24babfe54.png)
beto-rodriguez commented 2 years ago

Yes this is maybe not clear enough in the docs, I will keep an eye on that.

The Axis class has the Visible property, I think setting this property to false will be enough in your case, but it will also make separators invisible.

An alternative is to use the Axis.LabelFormatter property to return an empty label.

I will close this issue for know, thanks again for the report, feel free to re-open or reply if you require it.

SuperDaveOsbourne commented 2 years ago

That doesn't solve it for me but maybe I am dense. Can you show me in the above example how to affect only one of the combined charts x axis labels on the axis while not affecting both? This is a shared axis. Everything I did try affects both but I cant toggle them independently. Should I reopen this?

I think this would be a valuable example as I have spent many hours going through the source code trying to figure out how to address dual axis properties when they are shared.

beto-rodriguez commented 2 years ago

Oh, I got it, you are right.

So you only need to share the axis view (max and min limits) but not the style, this makes a lot of sense, and I think this is currently not supported.

I will keep this issue open to think on how to solve this.

SuperDaveOsbourne commented 2 years ago

Was this fixed in the new version?

beto-rodriguez commented 1 year ago

This is already fixed, for more info see https://github.com/beto-rodriguez/LiveCharts2/issues/174