My chart series design and legend does not tally

[Benjamin]

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

});

[Nikolay]

Hi Benjamin,

Could you pelase share a screenshot of what is not matching? I am not sure I understand the inquiry.

Regards,

Nikolay

[Benjamin]

hi @Nikolay,

updates my image

[Jay]

Are you asking about how there doesn't appear to be a marker for 2023 because it is white? Once again, there is the series.legendItem.markers.visual, but that doesn't seem to work with bar charts, only line. though there is nothing in the documentation that I can find that mentions that.

[Benjamin]

yes. Wondering if able to draw a border around the white legend item? Also would like to check if the legend item able to have rounded corner also?

[Jay]

I would think that visual function would be where you would need to do that. But as this dojo shows, it does not get invoked when the chart type is bar. Change the type to line and it does.

Perhaps @Nikolay can comment on this?

[Neli]

Hi,

I would suggest usinglegend.item.visual option as demonstrated in the Dojo linked here - https://dojo.telerik.com/xgleFYZQ.

- https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/dataviz/ui/chart/configuration/legend.item#legenditemvisual 

I hope this helps. 

Regards,

Neli