New to Kendo UI for Angular? Start a free 30-day trial

Converting Kendo UI for jQuery Charts to Kendo UI for Angular

Updated on Jul 8, 2026

Environment

Product

Progress® Kendo UI® for Angular Charts

Description

I have charts built with Kendo UI for jQuery and want to migrate them to Kendo UI for Angular. How can I translate the jQuery kendoChart() configuration object to the Angular component syntax?

This KB also answers the following questions:

How do I convert a Kendo UI jQuery Chart to an Angular Chart component?
What is the Angular equivalent of the jQuery kendoChart() initialization call?
How do I migrate jQuery Chart options like series, categoryAxis, valueAxis, and tooltip to Angular?

Kendo UI for Angular Charts use a declarative component syntax instead of the jQuery kendoChart() method. The configuration object you pass to jQuery becomes a set of child component tags and property bindings in Angular.

The core differences are:

Initialization: jQuery uses $("#chart").kendoChart({ ... }). Angular uses the <kendo-chart> component in a template.
Options structure: jQuery groups all options in a single object. Angular maps each option group to a dedicated child component (<kendo-chart-series>, <kendo-chart-category-axis>, <kendo-chart-value-axis>, and so on).
Data binding: jQuery accepts inline data arrays in the configuration object. Angular uses property bindings ([data]) to bind component class properties to chart inputs.

Basic Bar Chart

The following snippets show the same bar chart in both jQuery and Angular.

html
<div id="chart"></div>
<script>
    $("#chart").kendoChart({
        title: { text: "Site Visitors Stats" },
        subtitle: { text: "/thousands/" },
        legend: { visible: false },
        seriesDefaults: { type: "bar" },
        series: [
            { name: "Total Visits", data: [56000, 63000, 74000, 91000, 117000, 138000] },
            { name: "Unique Visitors", data: [52000, 34000, 23000, 48000, 67000, 83000] }
        ],
        valueAxis: {
            max: 140000,
            line: { visible: false },
            minorGridLines: { visible: true },
            labels: { rotation: "auto" }
        },
        categoryAxis: {
            categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            majorGridLines: { visible: false }
        },
        tooltip: {
            visible: true,
            template: "#= series.name #: #= value #"
        }
    });
</script>
typescript
import { Component } from "@angular/core";
import { KENDO_CHARTS } from "@progress/kendo-angular-charts";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [KENDO_CHARTS],
    template: `
        <kendo-chart>
            <kendo-chart-title text="Site Visitors Stats"></kendo-chart-title>
            <kendo-chart-legend [visible]="false"></kendo-chart-legend>
            <kendo-chart-series>
                <kendo-chart-series-item
                    type="bar"
                    name="Total Visits"
                    [data]="totalVisits">
                </kendo-chart-series-item>
                <kendo-chart-series-item
                    type="bar"
                    name="Unique Visitors"
                    [data]="uniqueVisitors">
                </kendo-chart-series-item>
            </kendo-chart-series>
            <kendo-chart-value-axis>
                <kendo-chart-value-axis-item
                    [max]="140000"
                    [line]="{ visible: false }"
                    [minorGridLines]="{ visible: true }"
                    [labels]="{ rotation: 'auto' }">
                </kendo-chart-value-axis-item>
            </kendo-chart-value-axis>
            <kendo-chart-category-axis>
                <kendo-chart-category-axis-item
                    [categories]="categories"
                    [majorGridLines]="{ visible: false }">
                </kendo-chart-category-axis-item>
            </kendo-chart-category-axis>
            <kendo-chart-tooltip [visible]="true" template="#= series.name #: #= value #">
            </kendo-chart-tooltip>
        </kendo-chart>
    `,
})
export class AppComponent {
    public categories = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
    public totalVisits = [56000, 63000, 74000, 91000, 117000, 138000];
    public uniqueVisitors = [52000, 34000, 23000, 48000, 67000, 83000];
}

Configuration Mapping Reference

The following table maps common jQuery Chart options to their Angular equivalents.

jQuery Option	Angular Equivalent
`title: { text: "..." }`	`<kendo-chart-title text="...">`
`subtitle: { text: "..." }`	`<kendo-chart-subtitle text="...">`
`legend: { visible: false }`	`<kendo-chart-legend [visible]="false">`
`seriesDefaults: { type: "bar" }`	`type="bar"` on each `<kendo-chart-series-item>`
`series: [{ name, data }]`	`<kendo-chart-series-item name="..." [data]="...">`
`categoryAxis: { categories: [...] }`	`<kendo-chart-category-axis-item [categories]="...">`
`valueAxis: { max: N }`	`<kendo-chart-value-axis-item [max]="N">`
`tooltip: { visible: true, template: "..." }`	`<kendo-chart-tooltip [visible]="true" template="...">`

For option groups that do not have a dedicated child component, pass the configuration object directly as an input binding on <kendo-chart>. You can also use inline configuration objects to migrate a jQuery configuration object with minimal changes.

Custom Visuals

For advanced scenarios that use custom drawing — such as custom bar shapes or custom legend items — the Angular Charts support the same drawing primitives through the @progress/kendo-drawing package. The jQuery visual callback translates to a [visual] input binding in Angular, and the drawing API (Path, Arc, Group, Text, and so on) remains the same.

The following example shows how to convert the custom visuals Bar Chart demo for jQuery to its Angular equivalent using the Drawing API.

Loading ...