JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<div id="example" class="k-content">
<div class="chart-wrapper">
<div id="chart"></div>
</div>
</div>
JavaScript
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
seriesDefaults: {
type: "bar"
},
series: [{
name: "World",
data: [15.7, 16.7, 20, 23.5, 26.6],
//=======================================
//RGBA color => NOT matching border color
//=======================================
color: 'rgba(210,210,210,.2)',
border: {
color: 'rgba(210,210,210,.6)'
}
}, {
name: "United States",
data: [67.96, 68.93, 75, 74, 78],
//==================================
//RGB color => matching border color
//==================================
color: 'rgb(210,210,210)'
}],
categoryAxis: {
categories: [2005, 2006, 2007, 2008, 2009]
}
});