CODEWITHSUNDEEP
kendo-asp.net-mvc
cah1r
cah1r

Reputation: 1969

Kendo theme doesn't change for charts

I want to change my kendo ui theme from default. The problem is it changes but only for controls: grid etc. but charts stay exactly the same.

I'm adding this styles in the bundle.

bundles.Add(new StyleBundle("~/Content/kendoUi").Include(
    "~/Content/kendo/2016.1.112/kendo.common.min.css",
    "~/Content/kendo/2016.1.112/kendo.mobile.all.min.css",
    "~/Content/kendo/2016.1.112/kendo.metro.min.css"
));

Am I missing something ?

Upvotes: 2

Views: 1236

Answers (1)

Christian Gollhardt
Christian Gollhardt

Reputation: 17024

I was struggeling with the same thing today. For some reason, the Theme of a chart must be set via widget configuration.

From the Documentation of the Kendo Client Library:

The Kendo UI Chart widgets come with a set of predefined themes. Use the theme option to select a theme, as demonstrated in the example below. The theme name is case insensitive.

$("#chart").kendoChart({
    theme: "blueOpal",
    //...
});

There is no documentation for the Server-Wrappers. However, it will work this way:

@(Html.Kendo().Chart().Theme("blueOpal"))

The reason for this, seems to be explained here:

Kendo UI Gauges, Charts, Barcodes, Diagrams, and Maps use a mix of browser technologies to attain the required precision and responsiveness. Visualization is rendered as vector graphics with computed layout. In contrast, interactive features are built using traditional HTML elements. As a result, the appearance settings of these widgets are split between declarative options and traditional CSS.

If you want to do it globaly, you need to override kendo:

var themable = ["Chart", "TreeMap", "Diagram", "StockChart", "Sparkline", "RadialGauge", "LinearGauge"];

if (kendo.dataviz) {
  for (var i = 0; i < themable.length; i++) {
    var widget = kendo.dataviz.ui[themable[i]];

    if (widget) {
      widget.fn.options.theme = "blueOpal";
    }
  }
}

Upvotes: 5

Related Questions