Grouped column depth order, prevent columns being hidden

[Matthew Paul]

Hi there, I've got a column chart that I'm adding multiple series to. I'd like to show the columns on top of each other rather than side by side (not stacked, they don't accumulate).

It looks like you should be able to do that with grouping:

Column Chart in Blazor Charts Component | Syncfusion

However, the chart doesn't seem to handle by default the zindex ordering of the columns, i.e. bringing the lowest value to the front (highest z-index) and working backward, so one column can hide another. There is a 'zorder' on the series as a whole, but I can't see a way to do it dynamically per column, or make it automatically bring the lowest value forward. I can sort of use 'opacity' to some effect so you can see through, but it's not really what I'm after. You don't get the tooltip and I'd like solid colours.

So here you can see the purple column is hiding the red column where it has a larger value:

Am I missing a way to do this, or shall I put forward a suggestion?

[Chrispine Agunja Imbo]

Hi Matthew Paul,

We have analysed your query. Unfortunately, it is not possible to make the lowest column point visible in a grouped column without adjusting the column width. Alternatively, the last option is to use stacked columns. Without employing this method, it is not possible to make the lowest column point visible. Z-index cannot be used to order the column points; it only orders the series. Please find the sample and screenshot for your reference. Kindly review the following code snippet.

<ChartSeries DataSource="@ChartPoints" XName="Year" YName="USA_Total" GroupName="USA" ColumnWidth="0.7" ColumnSpacing="0.1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">

</ChartSeries>

Sample: https://blazorplayground.syncfusion.com/LNhpXTVEfwBHyqKb

Screenshot:

Documentation for column width and spacing: https://blazor.syncfusion.com/documentation/chart/chart-types/column#column-space-and-width

Regards,

Gopalakrishnan

[Matthew Paul]

Ok, stacked columns doesn't make sense for this data as the results aren't cumulative, they don't add on top of each other to make a total, they need to share the same scale.

I'll put this forward as a request, as otherwise the grouped feature is a lot less useful, it doesn't make a lot of sense if your data get's hidden and it doesn't control for this.

[Durga Gopalakrishnan]

Matthew,

We have analyzed your required scenario. We don’t have option to display the lowest value to the front of grouped columns automatically. We request you to use opacity to view the lowest point when highest point is rendered over it. We have attached the modified sample for your reference. Please check with the below snippet and screenshot.

<SfChart>

  <ChartSeriesCollection>

    <ChartSeries Opacity="0.5"></ChartSeries>

  </ChartSeriesCollection>

</SfChart>

Sample : https://blazorplayground.syncfusion.com/BZhpXfKtJsVCBNZj

Kindly revert us if you have any other concerns.

[Matthew Paul]

Opacity is what I'm using as a bit of a hack at the moment, but as I mentioned, it doesn't really do the job. You don't get the tooltip on any obscured columns and I'd like solid, non-distorted colors.

[Ilamathi Govindaraj]

Hi Matthew,

We have analyzed your query regarding the distorted colors and tooltips being blocked by the column on top. Currently, our only option is to adjust the opacity to display the lowest value to the front of grouped columns manually. Unfortunately, we do not have an option to achieve this automatically at the moment. However, we suggest enabling the shared tooltip for the tooltips being blocked issue; it displays all the tooltip values in the chart. We have attached a sample and a screenshot for your reference. Please review the code snippet below.

Code-snippet:

<SfChart>

    <ChartPrimaryXAxis ValueType="@Syncfusion.Blazor.Charts.ValueType.Category">

    </ChartPrimaryXAxis>

    <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>

    <ChartSeriesCollection>

        <ChartSeries DataSource="@ChartPoints" XName="Year" YName="USA_Total" GroupName="USA" Opacity="0.5" ColumnSpacing="0.1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">

        </ChartSeries>

        <ChartSeries DataSource="@ChartPoints" XName="Year" YName="USA_Gold" GroupName="USA" Opacity="0.5" ColumnSpacing="0.1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">

        </ChartSeries>

        <ChartSeries DataSource="@ChartPoints" XName="Year" YName="UK_Total" GroupName="UK" Opacity="0.5" ColumnSpacing="0.1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">

        </ChartSeries>

        <ChartSeries DataSource="@ChartPoints" XName="Year" YName="UK_Gold" GroupName="UK" Opacity="0.5" ColumnSpacing="0.1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">

        </ChartSeries>

    </ChartSeriesCollection>

</SfChart>       

Screenshot:

Sample Link : https://blazorplayground.syncfusion.com/VXLzZSNMrIgJOdCW

Kindly revert us if you have any concerns.

Regards,

Ilamathi Govindaraj.