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" }'>