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

Theme

configuration

The diagram theme. With versions prior to R1 2023 this can be either the respective LESS theme from the list below or "sass". When set to "sass" the diagram will read the variables from a Sass-based theme.

Note: Since Q2 2024 release, the default value for the theme property is "sass" instead of "default". It is recommended to use "sass" with version Q2 2024 or later.

The supported values are:

"sass"
"black"
"blueopal"
"bootstrap"
"bootstrap-v4" - works only with the Bootstrap-v4 Sass theme loaded in the page
"default"
"default-v2" - works only with the Default-v2 Sass theme loaded in the page
"fiori"
"flat"
"highcontrast"
"material"
"materialBlack"
"metro"
"metroblack"
"moonlight"
"nova"
"office365"
"silver"
"uniform"

theme

String

Default: "sass"

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        {
            id: "1",
            content: {
                text: "Themed Shape"
            },
            x: 100,
            y: 100
        }
    ],
    theme: "material"
});
</script>