Chart - Category Axis labels duplicated

[Mike]

It may be something I'm missing but I've built a multi-series chart with line and column data.  Since it is possible for the values on the bar to be negative, the issue I'm seeing is the category label is repeated, one for each series. Since I am also using zoom, if I zoom in and then back out, the duplicated label is now gone. I should also note that if I remove the label position, currently set as start, it will render only one but then having negative values makes that look bad.

What am I missing to stop the axis duplication?

Attached is the initial render of the chart as coded below.  

        <kendo-chart name="chart" >
            <chart-legend visible="true" position="Kendo.Mvc.UI.ChartLegendPosition.Bottom"></chart-legend>
            <series>
                <series-item type="Kendo.Mvc.UI.ChartSeriesType.Column" name="Amount" field="Amount" category-field="Period" color="#003399">
                    <labels visible="true" format="{0:c2}"></labels>
                    <tooltip visible="true" template="Date: #= dataItem.Period#<br />Amt: #= kendo.format('{0:c2}', dataItem.Amount) #"></tooltip>
                </series-item>
                <series-item type="Kendo.Mvc.UI.ChartSeriesType.Line" name="Total" field="RunningTotal" category-field="Period" color="#FF9900">
                    <labels visible="false" format="{0:c2}"></labels>
                    <tooltip visible="true" template="Date: #= dataItem.Period#<br />Total: #= kendo.format('{0:c2}', dataItem.RunningTotal) #"></tooltip>
                </series-item>
            </series>
            <datasource type="Kendo.Mvc.UI.DataSourceTagHelperType.Ajax" server-operation="true" page-size="0">
                <transport>
                    <read url="" />
                </transport>
                <sorts>
                    <sort field="Period" />
                </sorts>
            </datasource>
            <category-axis>
                <category-axis-item>
                    <labels position="ChartAxisLabelsPosition.Start" step="2">
                        <chart-category-axis-labels-rotation align="Kendo.Mvc.UI.ChartAxisLabelRotationAlignment.End" angle="315" />
                    </labels>
                    <chart-category-axis-item-title text="Date"></chart-category-axis-item-title>
                </category-axis-item>
            </category-axis>
            <value-axis>
                <value-axis-item>
                    <labels format="c0"></labels>
                </value-axis-item>
            </value-axis>
            <zoomable>
                <mousewheel lock="ChartAxisLock.Y" />
            </zoomable>
        </kendo-chart>

[Nikolay]

Hello Mike,

In your Chart:

 - You bind two series (Column + Line)

 - Both use category-field="Period"

 - You do not define categories on <category-axis-item>

 - Because negative values require alignment adjustments, Kendo generates two internal category axes (one per series) → duplicate labels appear

Zooming resets the internal axis calculation → duplicates disappear (a known Kendo behavior when the category axis is auto-generated).

To overcome the label duplication, add an explicit categories binding so that both series share the same axis.

<category-axis>
    <category-axis-item category-field="Period">
        <labels position="Start" step="2">
            <chart-category-axis-labels-rotation align="End" angle="315" />
        </labels>
        <chart-category-axis-item-title text="Date"></chart-category-axis-item-title>
    </category-axis-item>
</category-axis>

Or define categories manually (if applicable)

<category-axis>
    <category-axis-item>
        <categories>
            @foreach (var item in Model) {
                <category>@item.Period</category>
            }
        </categories>

To sum up, add category-field="Period" on the <category-axis-item> to force ONE shared axis.

Here is a Telerik REPL with only one rendering of category axis labels: https://netcorerepl.telerik.com/wTlmaFlv43OAHkQR06

Regards,
Nikolay
Progress Telerik

[Mike]

I tried a few different approaches, none of which work to resolve the duplicated axis labels with the version I am using (2025.3.1002).  I also discovered that the property name is "field" as per documentation.  Categories also does not work per the format described as there is no available sub-element for categories.  Is that for a future enhancement?

Each approach below still results in duplicated x-axis labels.  Does it matter the data is from a remote source? The example given has hard coded values so I was curious if that made a difference.

Approach 1:

<category-axis>
    <category-axis-item field="Period">
        <labels position="ChartAxisLabelsPosition.Start" step="2">
            <chart-category-axis-labels-rotation align="Kendo.Mvc.UI.ChartAxisLabelRotationAlignment.End" angle="315" />
        </labels>
        <chart-category-axis-item-title text="Period"></chart-category-axis-item-title>
    </category-axis-item>
</category-axis>

 

Approach 2:

<series-item type="Kendo.Mvc.UI.ChartSeriesType.Column" name="Amount" field="Amount" color="#003399" category-axis="PeriodAxis">

...

<category-axis>
    <category-axis-item name="PeriodAxis" field="Period">
        <labels position="ChartAxisLabelsPosition.Start" step="2">
            <chart-category-axis-labels-rotation align="Kendo.Mvc.UI.ChartAxisLabelRotationAlignment.End" angle="315" />
        </labels>
        <chart-category-axis-item-title text="Period"></chart-category-axis-item-title>
    </category-axis-item>
</category-axis>

Approach 3:

<category-axis-item name="PeriodAxis" categories='new string[] { "Period" }'>

[Nikolay]

Hi Mike,

The binding of the Chart - remote or local - does not affect the category axis labels.

Your code does create duplicate category labels because it satisfies all three conditions that activate Kendo’s internal "hidden category axis" feature.

Condition 1 — Column labels are visible

<series-item type="Column">
    <labels visible="true" format="{0:c2}"></labels>
</series-item>

Condition 2 — Your Column series has negative values

I am attaching a small Telerik for ASP.NET Core project with TagHelper Chart that has negative values but does not render duplicate category axis labels.

Why does it not render duplicates?

- no label positioning
- no negative-value positioning rules
- no zoom
- no “start” label alignment
- no need for multiple baselines

So Kendo builds a single clean category axis.

Regards,

Nikolay

 

[Mike]

I'm confused now.  Your original reply said "To overcome the label duplication, add an explicit categories binding so that both series share the same axis."  I did that.  Now, are you saying because I have zoom and a start label positioning, that will always render a duplicate axis?

Am I reading this wrong?

[Nikolay]

Hi Mike,

Could you pelase share a runnable page where the problem is replicated? I am still not able to replicate this duplication on my end, but once I do, I will be able to investigate further.

Feel free to submit a private support ticket if attaching a project publicly is not possible.

Regards,

nikolay

[Mike]

At this point, you have me at a loss. The code I posted in my originating post is the logic that is producing a duplicate axis. Even you identified why that duplication would happen.

I believe there is an issue when using all the options and there needs to be something that tells the code when to show all axis labels and when not to (especially when one series has labels off). It would be helpful to have a property to isolate each axis label visibility for each series item instead of assuming when you have labels visible, label positioning on, and zoom, that they should all be shown.

I worked around the problem by turning off all series item labels.

[Nikolay]

Hi Mike,

Here is another modification you can try. I believe this will resolve the duplication of the category axis labels.

Define the category field on the CategoryAxis (not per series)

Move the category definition to the category axis and remove category-field from the series.

<kendo-chart name="chart3">
    <datasource>
        <transport>
            <read url="@Url.Action("GetChartData", "Home")" />
        </transport>
        <sorts>
            <sort field="Category" />
        </sorts>
    </datasource>
- 
    <chart-legend visible="true" position="Kendo.Mvc.UI.ChartLegendPosition.Bottom"></chart-legend>

    <series>
        <series-item type="ChartSeriesType.Column"
                     name="Amount"
                     field="Amount"
                     color="#003399">
        </series-item>

        <series-item type="ChartSeriesType.Line"
                     name="Total"
                     field="RunningTotal"
                     color="#FF9900">
        </series-item>
    </series>

    <category-axis>
        <category-axis-item field="Period">
            <labels position="ChartAxisLabelsPosition.Start" step="2">
                <chart-category-axis-labels-rotation
                    align="ChartAxisLabelRotationAlignment.End"
                    angle="315" />
            </labels>
            <chart-category-axis-item-title text="Date"></chart-category-axis-item-title>
        </category-axis-item>
    </category-axis>

    <value-axis>
        <value-axis-item>
            <labels format="c0" />
        </value-axis-item>
    </value-axis>
</kendo-chart>

This way:

- categoryAxis.field defines one shared category set;

- Series only supply values;

- Kendo no longer merges categories per series - no duplicates;

Regards,

Nikolay