Set static/fix column width for StackedColumnSeries

[Tamas Kormos]

Hello,

Let's say my horizontal axis is a datetime axis. If I have one column in every 10th minute the columns are thick. When I have one column in every minute the columns are thin.

I would want to set a static width for every column (let's say 10 pixel) and even if two columns would be too close to each other they could just overlap. Is that possible?

Thanks in advance!

Best regards,

Tamas.

[Yuvaraj Palanisamy]

Hi Tamas Kormos, 

 

Greetings from Syncfusion.

We have analyzed your query and we can achieve your requirement “Set column width for pixel value” by workaround with help of CustomTemplate support for chart series. please find the code example below.  

 

CodeSnippet: 

<syncfusion:SfChart.Resources> 

    <ResourceDictionary> 

        <DataTemplate x:Key="seriesTemplate"> 

            <Canvas> 

                <Border Background="{Binding Interior}" 

                        Canvas.Left="{Binding RectX}"  

                        Canvas.Top="{Binding RectY}"  

                        Width="10"  

                        Height="{Binding Height}"  /> 

            </Canvas> 

        </DataTemplate> 

    </ResourceDictionary> 

</syncfusion:SfChart.Resources> 

 

<syncfusion:ColumnSeries x:Name="columnSeries" 

                         YBindingPath="Value" 

                         XBindingPath="XValue"  

                         ItemsSource="{Binding Data1}" 

                         CustomTemplate="{StaticResource seriesTemplate}"> 

</syncfusion:ColumnSeries> 

 

Also, we have attached the complete sample for your reference, please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/169015/ze/Sample_fixed_column-94279331  

Output:
 

Please let us know if you have any concern.

 

Regards, 

Yuvaraj. 

[Tamas Kormos]

Hi Yuvaraj Palanisamy,

Thank you, now the fixed width is working very well!

Sadly, now I have another issue. The chart is loading live data of the last one hour and if the chart contains only one element, the column is not visible, only after I add a second column to the chart.

The only thing I found is that if I change the Canvas.Left property of the custom template to 0 the column turns visible.

<Border Background="{Binding Interior}"
        Canvas.Left="{Binding RectX}"
        Canvas.Top="{Binding RectY}"
        Width="12"
        Height="{Binding Height}" />

Only one record:

Three records: (same result with two records)

And after I change the Canvas.Left property:

<Border Background="{Binding Interior}"
        Canvas.Left="0"
        Canvas.Top="{Binding RectY}"
        Width="12"
        Height="{Binding Height}" />

Please help me solve this issue.

Thanks in advance!

Best regards,

Tamas

[Tamas Kormos]

Hello Yuvaraj Palanisamy,

This is the xaml code of the chart that is shown on the pictures I attached earlier.

<sync:SfChart Height="163"
              Margin="0,0,2,0">
    <sync:SfChart.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="seriesTemplate">
                <Canvas>
                    <Border Background="{Binding Interior}"
                            Canvas.Left="{Binding RectX}"
                            Canvas.Top="{Binding RectY}"
                            Width="8"
                            Height="{Binding Height}" />
                </Canvas>
            </DataTemplate>
        </ResourceDictionary>
    </sync:SfChart.Resources>
    <sync:SfChart.PrimaryAxis>
        <sync:DateTimeAxis Minimum="{Binding Start, UpdateSourceTrigger=PropertyChanged}"
                           Maximum="{Binding End, UpdateSourceTrigger=PropertyChanged}"
                           Interval="1"
                           Visibility="Visible"
                           LabelFormat="HH:mm" />
    </sync:SfChart.PrimaryAxis>
    <sync:SfChart.SecondaryAxis>
        <sync:NumericalAxis Maximum="150"
                            Interval="50" />
    </sync:SfChart.SecondaryAxis>
    <sync:SfChart.Series>
        <sync:StackingColumnSeries ShowTooltip="True"
                                   SegmentColorPath="CycleTimeColor"
                                   ItemsSource="{Binding HourlyData}"
                                   XBindingPath="Date"
                                   CustomTemplate="{StaticResource seriesTemplate}"
                                   YBindingPath="Interval1" />
        <sync:StackingColumnSeries ShowTooltip="True"
                                   SegmentColorPath="IntervalColor"
                                   ItemsSource="{Binding HourlyData}"
                                   CustomTemplate="{StaticResource seriesTemplate}"
                                   Label="Interval2"
                                   XBindingPath="Date"
                                   YBindingPath="Interval2" />
    </sync:SfChart.Series>
</sync:SfChart>

Thanks in advance!

Best regards,
Tamas

[Yuvaraj Palanisamy]

Hi Tamas Kormos,

 

We have checked the reported problem “DateTimeAxis with Minimum & Maximum and single datapoint ColumnSeries does not rendered properly” has been reproduced at our end. Currently we are validating this, and we will update you with complete details on or before 27^th September 2021. We appreciate your patience until then. 

Regards, 

Yuvaraj. 

[Yuvaraj Palanisamy]

Hi Tamas Kormos, 

 

Thanks for your patience. 

  

On further analysis with the reported issue, we have confirmed that “Column series with single datapoint does not rendered properly” as an issue. The fix of the reported issue will be included in our weekly NuGet release which is expected to be rolled out on 19^th October 2021. We appreciate your patience until then. We will let you know once it gets rolled out.   

     

You can now track the status of your request, review the proposed resolution timeline and contact us for any further inquiries through this link.      

    

Feedback link: https://www.syncfusion.com/feedback/29024/column-segment-with-single-data-point-does-not-rendered-properly  

    

Note: The provided feedback link is private, and you need to login to view this feedback   

 

Regards, 

Yuvaraj. 

[Tamas Kormos]

Hello Yuvaraj Palanisamy,

Thank you very much, I will track the private request then.

I marked your first reply to my original question as answer.

Best regards,

Tamas.

[Saravanan Madheswaran]

Hi Tamas,

Thanks for the update, please let us know if need any further assistance.

Regards,
Saravanan.

[Yuvaraj Palanisamy]

Hi Tamas, 

 

Thanks for your patience.

On further analysis of your requirement “Single datapoint ColumnSeries with custom template does not show segment when we set DateTimeAxis with minimum and maximum property” is not an issue. When we set DateTimeAxis Minimum & Maximum property segment was rendered from the outside the chart area, hence RectX got the negative value. To overcome this, we would like to suggest that draw segment for the exact datapoint value in the sample level as per the following code example. 

 

CodeSnippet: 

<DataTemplate x:Key="seriesTemplate"> 

    <Canvas> 

        <Border Background="{Binding Interior}"  

                Canvas.Left="{Binding  Converter={StaticResource segmentConverter}}" 

                Canvas.Top="{Binding RectY}"  

                Width="12"  

                Height="{Binding Height}" /> 

    </Canvas> 

</DataTemplate> 

 

 

public class SegmentValueConverter : System.Windows.Data.IValueConverter 

    { 

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

            var segment = value as Syncfusion.UI.Xaml.Charts.ColumnSegment; 

            var center = segment.RectX + (segment.Width) / 2 - (segment.Series as CustomColumnSeries).FixedPixelWidth / 2; 

             

            return center; 

        } 

 

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

            throw new NotImplementedException(); 

        } 

    } 

 

 

Also, we have attached the complete sample for your reference. Please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/169015/ze/Column_Fixed_ColumnWidth-743061275  

  

Output: 

 

 

Please let us know if you have any concern. 

 

Regards, 

Yuvaraj.