Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css"/>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="chart1" style="height: 240px;"></div>
  <hr/>
<div id="chart2" style="height: 240px;"></div>
<script>
  
  
$("#chart1").kendoChart({
  theme: "flat",
  dataSource: {
    data:[
    {key: "Red Category", value: "2", usercolor: "red"},
    {key: "Green Category", value: "3", usercolor: "green"},
  ]},
  seriesDefaults: {
    type: "bar", 
  },
  series: [{ 
      field: "value",
      categoryField: "key",
      colorField: "usercolor",
  }],  
});
  
$("#chart2").kendoChart({
  theme: "flat",
  seriesDefaults: {
    type: "bar", 
  },
  series: [{ 
      field: "value",
      colorField: "usercolor",
      data: [
        {value: "2", usercolor: "red"},
        {value: "3", usercolor: "green"},
      ],
  }],  
  categoryAxis:{
    categories:["Red Category", "Green Category"],
  }
});
  
  
</script>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ezankerpro
0viewers