How to set exact bar width in Column series(Bar chart)
It seems the bar width of the SFCartesian chart column series are set on based on number of data point. Is there any way I can set exact width for bars?
Current scenario(Demo project is attached):
Attachment: MauiBarChartWidth_a14d33c7.zip
Hi Md. Shahadat,
We have validated your query and would like to inform you that we suggest using the category axis and setting the width property in the column series to specify the exact width for each data point to the desired column width, as shown in the following code snippet and images.
Chart 2:
|
<chart:SfCartesianChart> <chart:SfCartesianChart.XAxes> <chart:CategoryAxis > <chart:CategoryAxis.Title> <chart:ChartAxisTitle Text="Time" /> </chart:CategoryAxis.Title> <chart:CategoryAxis.LabelStyle> <chart:ChartAxisLabelStyle LabelFormat="hh:mm:ss" /> </chart:CategoryAxis.LabelStyle> </chart:CategoryAxis> </chart:SfCartesianChart.XAxes> <chart:SfCartesianChart.YAxes> <chart:NumericalAxis> <chart:NumericalAxis.Title> <chart:ChartAxisTitle Text="Value" /> </chart:NumericalAxis.Title> </chart:NumericalAxis> </chart:SfCartesianChart.YAxes>
<chart:ColumnSeries x:Name="series2" XBindingPath="Time" YBindingPath="Value" Width="0.8"/> </chart:SfCartesianChart> |
Output:
Please refer to the attachment sample and let us know if you need further assistance.
Regards,
Nanthini M.
Attachment: F_186690_ce614d44.zip
Hi Md. Shahadat,
We have validated your query, and you can set the fixed bar width using a custom series and custom segment, which are inherited from the column series and column segment, respectively.
Here, you can set the fixed width and spacing for the bar segment, as shown the following code snippet.
While drawing the custom segment, we were unable to place the axis label and tick line near the segment due to the internal accessibility restriction to set the axis label and tick positions.
Custom series
|
public class ColumnSeriesExt : ColumnSeries { private double width; public double FixedWidth { get { return width; } set { width = value; }
}
private double spacing; public double FixedSpacing { get { return spacing; } set { spacing = value; }
}
protected override void DrawSeries(ICanvas canvas, ReadOnlyObservableCollection<ChartSegment> segments, RectF clipRect) {
for(int index = 0;index < segments.Count; index++) { if (segments[index] is ColumnSegmentExt segmentExt) { segmentExt.Index = index; } }
base.DrawSeries (canvas, segments, clipRect); }
protected override ChartSegment CreateSegment() { return new ColumnSegmentExt(); } } |
Custom segment
|
public class ColumnSegmentExt : ColumnSegment { private int index; public int Index { get { return index; } set { index = value; } }
public RectF rect { get; set; }
protected override void Draw(ICanvas canvas) { if (this.Series is ColumnSeriesExt series) { PathF path = new PathF();
if (Index == 0) { rect = new RectF((float)series.FixedSpacing * Index, Top, (float)series.FixedWidth, Bottom - Top); } else { rect = new RectF((float)((series.FixedSpacing + series.FixedWidth) *(Index)), Top, (float)series.FixedWidth, Bottom - Top); }
path.AppendRectangle(rect);
var color = (Fill is SolidColorBrush brush) ? brush.Color : Colors.Transparent; canvas.FillColor = color; canvas.FillPath(path); } } } |
Xaml
|
<chart:SfCartesianChart.Series> <local:ColumnSeriesExt FixedWidth="80" FixedSpacing="10" x:Name="series1" XBindingPath="Time" YBindingPath="Value" /> </chart:SfCartesianChart.Series> |
Output:
Please let us know if you require further assistance.
Regards,
Nanthini.
Attachment: F_186690(1)_88a0b943.zip
While drawing the custom segment, we were unable to place the axis label and tick line near the segment due to the internal accessibility restriction to set the axis label and tick positions.
Does this mean the segment is not displayed in the correct spot on the axis? When I use your sample code, I can indeed specify the width of the segment. However, the segments are just drawn consecutively and not placed accordingly on the axis. This doesn't seem to be a workable solution.
I'm facing somewhat of a different issue than the original poster but looking for essentially the same solution. If I have a graph with one data point, the segment is properly displayed over the correct date.
If I add a second data point, things get really weird. I don't understand how this width is calculated. Why does adding a second data point cause the segment to get so wide?
Specifying the width property on the ColumnSeries doesn't help here. I want the segment to always be "one day" wide.
<chart:ChartSeriesCollection>
<chart:ColumnSeries ItemsSource="{Binding SfColumnChartAverageDailyReadings}"
XBindingPath="DateTime"
YBindingPath="Systolic"
EnableAnimation="True"
Label="Avg Daily Systolic"
Fill="{Binding SfColumnChartSystolicColor}"
CornerRadius="5"
EnableTooltip="True"
/>
<chart:ColumnSeries ItemsSource="{Binding SfColumnChartAverageDailyReadings}"
XBindingPath="DateTime"
YBindingPath="Diastolic"
EnableAnimation="True"
Label="Avg Daily Diastolic"
Fill="{Binding SfColumnChartDiastolicColor}"
CornerRadius="5"
EnableTooltip="True"
/>
</chart:ChartSeriesCollection>
<chart:SfCartesianChart.XAxes>
<chart:DateTimeAxis Interval="1"
IntervalType="Days"
ShowMajorGridLines="False"
LabelRotation="-45"
Maximum="{Binding SelectedEndDate}"
Minimum="{Binding SelectedStartDate}"
EdgeLabelsDrawingMode="Center"
>
<chart:DateTimeAxis.LabelStyle>
<chart:ChartAxisLabelStyle TextColor="{Binding LabelsColor}" LabelFormat="MM/dd" />
</chart:DateTimeAxis.LabelStyle>
</chart:DateTimeAxis>
</chart:SfCartesianChart.XAxes>
Just to be clear, as I indicated, I found a workable solution to the problem I was facing. I want each segment of the chart to be drawn one day wide. Here's the outcome I want.
Using your CalculateSmartWidth method, I get something that looks like this.
As you requested, I've attached sample code that shows how I'm using DateTimeAxis and how it doesn't seem to work with your CalculateSmartWidth method.
Attachment: ColumnChart_f66e7bb4.zip
