Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!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"></div>
  <hr/>
  <div id="chart2"></div>
<script>
  
$("#chart1").kendoChart({
  seriesColors: ["red", "green"],
  "seriesDefaults": {
    "type": "bar", spacing: 4
  },
  series: [
    { data: [2,3],gap:3 }
  ],  
  categoryAxis:{
    categories:["Red Category","Green Category"],
    lables:{
      visible:true, }
  }
  
  
});
  
  $("#chart2").kendoChart({
  seriesColors: ["red", "green"],
  "seriesDefaults": {
    "type": "bar", spacing: 4
  },
  series: [
    { data: [2,3] },{ data: [1,2] }
  ],  
  categoryAxis:{
    categories:["Red Category","Green Category"],
    lables:{
      visible:true, }
  }
  
  
});
  
  
</script>
</body>
</html>
Output 300px

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

Dismiss x
public
Bin info
steennppro
0viewers