Customize Chart Themes

Your project might require a theme that is different from the default ones the Kendo UI Chart supports.

The example below demonstrates how to create a custom theme for a Kendo UI Chart.

Example

    <div id="chart" />
    <script>
      var themes = kendo.dataviz.ui.themes;
      var MyTheme = kendo.deepExtend(
        // Deep copy
        {},

        // Base theme      
        themes.silver,

        {
          chart: {
            // Can contain any chart settings
            seriesColors: ["#000022", "#000044", "#000066", "#000088", "#0000aa", "#0000cc", "#0000ee"]
          }
        }
      );

      themes.MyTheme = MyTheme;

      $("#chart").kendoChart({
        theme: "MyTheme",
        series: [{
          data: [1]
        }, {
          data: [1]
        }, {
          data: [1]
        }, {
          data: [1]
        }, {
          data: [1]
        }, {
          data: [1]
        }, {
          data: [1]
        }]
      });
    </script>

See Also

• Chart JavaScript API Reference
• Drawing API
• How to Aggregate Data in Pie Charts
• How to Draw on Scatter Plots Surface
• How to Expand Clickable Area of Points
• How to Fit PDF Exported Chart to Page
• How to Handle Right Click in Charts
• How to Place Text in the Center of Donut Charts
• How to Render Custom Plot Bands
• How to Set Different Marker Types for Grouped Line Charts
• How to Use Linear Gradient As Background in Bars

For more runnable examples on Kendo UI Charts, browse the How To documentation folder.