categoryaxis.labels.font and seriesDefault.labels.font string set not apply

dojo link

I have a kendo UI Jquery scatterplot chart with markers of type: square and rotation: 45. I'm trying to add a class based on the series to the markers so that certain ones can be styled to have a pointer when the user mouses over them. I found a few Google AI answers but they seem to be wrong. Here is what I tried where chartData is set to my series option on initialization.

Update: I added the class manually in dev tools and it still doesn't trigger the pointer to appear. This seems to be due to there being a separate marker that Kendo is creating in the DOM for the hover event which does not get the class. I need to add a cursor: pointer; style to that element

        chartData.push({
            name: legendSeriesName,
            xField: "x",
            yField: "y",
            data: storeDetailScatterPlotData
                .filter(d => d.seriesName === seriesName && d.accountId === storeDetailAccountId)
                .map(d => ({ x: d.sales, y: d.storeAmt, storeName: d.storeName, storeId: d.storeId, accountId: d.accountId })),
            zIndex: 10 - index,
            color: seriesColor,
            markers: {
                border: seriesColor,
                background: seriesColor,
                type: "square",
                rotation: 45,
                visual: function (e) {
                    var series = e.series.name;
                    var defaultVisual = e.createVisual();
                    defaultVisual.options.attr("class", series);
                    return defaultVisual;
                }
            }
        });

Hi.

my chart bar design and legend items design does not match up

my kendo configuration

$("#my-score-chart").kendoChart({
    transitions: false,
    tooltip: { visible: false },
     legend: {
     orientation: 'horizontal',
     position: "bottom"
 },
    plotArea: {
        margin: { top: 20, bottom: 20, left: 20, right: 20 }
    },
    seriesDefaults: {
        type: "bar",
        spacing: 0,
        gap:10,
        highlight: { visible: false },
        labels: {
            visible: true,
            position: "outsideEnd",
            template: "#= value #"
        }
    },
    series: [
        { name: "2025", data: [75, 75], color: "#254599" },
        { name: "2024", data: [50, 50], color: "#92A7E0" },
        { name: "2023", data: [25, 35], color: "#FFFFFF", border: { width: 1, color: "#616D80", dashType: "solid" } }
    ],
    valueAxis: {
        visible: false
    },
    categoryAxis: {
        categories: ["Strategy & Leadership", "Governance"],
        majorGridLines: { visible: false },
        labels: { color: "#000" }
    }

});

i realised the width of the width get change when the number of category changes.

example the bar width get bigger when category get lesser.

for column, the chart get center align.

what i wanted

for column type chart, to be left align when there is only 1 category

for bar type chart, to be top align when there is only 1 category

for all chart type, the width of the series item to be same irregardless of the number of category

can't seems to find an example for creating column chart looking similar to the image

My chart gets cut off

current issue

But it seems to be working properly on dojo

I have copied all my CSS and JS used on my site to dojo, but I still don't understand why it is not working on my site.

as the site is an internal site, I am not able to provide a link to the actual site.

I want to check how to add a custom label for column chart as shown in image below.

I would like to check if it is possible  to create a chart similar to the image

I would like to customise the value axis for Kendo chart to something similar to the image

dojo link

Hello.

We own a license for an older version of Kendo UI for jQuery, and we are now testing the latest release (demo version) to decide if we should upgrade.

We have a chart showing the datapoints from a datasource, where category is a date (rounded to minute) and value is a number. Series is set to show a gap if data point is missing.

The attached picture shows the chart on the left, and the content of the datasource._view array as logged in the browser's JavaScript console. As you can see after datapoint at 15.57 there's a big gap, even if the datapoints actually exist in the datasource.

The chart is updated by creating a new datasource when new data is available every 5 minutes.

What could be the reason if such behavior? Are we doing something wrong? Maybe we should reset the chart in some way before passing the updated datasource?

Thank you.