Kendo Column Chart rounded corners with custom hightlight color

149 Views Asked by At

enter image description here

How to make a kendo column chart rounded border like this. The code I am using is something like this. And also want to change the hover-over color for the column chart

<kendo-chart-series>
            <kendo-chart-series-item
                type="line"
                [field]="'engagement'"
                categoryField="label"
                [style]="'smooth'"
                [data]="chartData.data"
                [color]="chartData.color"
            >
                <kendo-chart-series-item-tooltip format="Avg. Engagements: {0}"></kendo-chart-series-item-tooltip>
            </kendo-chart-series-item>
            <kendo-chart-series-item
                type="column"
                [line]="{ style: 'smooth' }"
                [field]="'posts'"
                [data]="chartData.data"
                [color]="chartData.secondarycolor"
                [border]="borderOptions"
                [highlight]="seriesHighlight"
            >
                <kendo-chart-series-item-tooltip format="Total: {0}"></kendo-chart-series-item-tooltip>
            </kendo-chart-series-item>
        </kendo-chart-series>
1

There are 1 best solutions below

1
Don On

You can try to achieve this with the Kendo SeriesDefault Charts Api: https://www.telerik.com/kendo-angular-ui/components/charts/api/SeriesDefaults/

Similar to this:

<kendo-chart-series-defaults type="column" [highlight]="{ color: #fff }" [border]="{ cornerRadius: 5 }">
</kendo-chart-series-defaults>