You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hi,
I would like to know if it is possible to use <ScrollView Orientation="Horizontal"></ScrollView> to display lineChart with a more data than the display can show.
In my sample I have data going from date 1 to date 2 over multiple year.
Here is the sample of data:
The contentpage <VerticalStackLayout> <ScrollView Orientation="Horizontal"> <micro:ChartView x:Name="ChartDate" MaximumWidthRequest="300"/> </ScrollView> </VerticalStackLayout>
The data load
`protected override void OnAppearing()
{
base.OnAppearing();
try
{
List dateEntries = [];
int totalDates = 24;
int year = 2024;
int month = 0;
for (int i = 0; i < totalDates; i++)
{
month++;
if (month > 12)
{
year++;
month = 1;
}
string monthName = MonthName(month);
string date = $"{year} - {monthName}";
int entryValue = RandomValue(0, 500);
dateEntries.Add(
new ChartEntry(entryValue)
{
Label = date,
ValueLabel = date,
Color = RandomColor(),
});
}
ChartDate.Chart = new LineChart()
{
Entries = dateEntries,
LabelTextSize = 11,
LineMode = LineMode.Straight,
ValueLabelOrientation = Orientation.Horizontal,
LabelOrientation = Orientation.Horizontal,
};
ChartDate.HeightRequest = ChartHeightRequest;
}
catch (Exception err)
{
}
}
List<SKColor> colors =
[
SKColor.Parse("#2c3e50"),
SKColor.Parse("#77d065"),
SKColor.Parse("#b455b6"),
SKColor.Parse("#3498db"),
];
private SKColor RandomColor()
{
int number = RandomValue(1, 4);
return colors[number];
}
private int RandomValue(int min, int max)
{
Random random = new();
return random.Next(min, max);
}
private string MonthName(int month)
{
if (month == 1) return "Jan";
else if (month == 2) return "Feb";
else if (month == 3) return "Mar";
else if (month == 4) return "Apr";
else if (month == 5) return "May";
else if (month == 6) return "Jun";
else if (month == 7) return "Jul";
else if (month == 8) return "Aug";
else if (month == 9) return "Sep";
else if (month == 10) return "Oct";
else if (month == 11) return "Nov";
else return "Dec";
}`
I found a solution
In the content page <VerticalStackLayout> <ScrollView Orientation="Horizontal" Padding="10"> <micro:ChartView x:Name="ChartDate" MinimumWidthRequest="800"/> </ScrollView> </VerticalStackLayout>
The only issue is that the labels reduce at the same time as the windows is reduced when you force the ValueLabelOrientation or LabelOrientation. Wich could be damaging for reviewing data.
I found a solution
In the content page <VerticalStackLayout> <ScrollView Orientation="Horizontal" Padding="10"> <micro:ChartView x:Name="ChartDate" MinimumWidthRequest="800"/> </ScrollView> </VerticalStackLayout>
The only issue is that the labels reduce at the same time as the windows is reduced when you force the ValueLabelOrientation or LabelOrientation. Wich could be damaging for reviewing data.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
I found a solution
In the content page
<VerticalStackLayout> <ScrollView Orientation="Horizontal" Padding="10"> <micro:ChartView x:Name="ChartDate" MinimumWidthRequest="800"/> </ScrollView> </VerticalStackLayout>The only issue is that the labels reduce at the same time as the windows is reduced when you force the ValueLabelOrientation or LabelOrientation. Wich could be damaging for reviewing data.
Microchart.mp4