JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<div id="example" class="k-content">
<div class="chart-wrapper">
<div id="chart"></div>
</div>
</div>
JavaScript
function createChart() {
$("#chart").kendoChart({
title: {
text: "World population by age group and sex"
},
legend: {
visible: true
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "0-19",
stack: "Female",
data: [854622, 925844, 984930, 1044982, 1100941, 1139797, 1172929, 1184435, 1184654],
color: "brown"
}, {
name: "20-39",
stack: "Female",
data: [490550, 555695, 627763, 718568, 810169, 883051, 942151, 1001395, 1058439],
color: "green"
}, {
name: "40-64",
stack: "Female",
data: [379788, 411217, 447201, 484739, 395533, 435485, 499861, 569114, 655066],
color: "blue"
}, {
name: "65-79",
stack: "Female",
data: [97894, 113287, 128808, 137459, 152171, 170262, 191015, 210767, 226956],
color: "red"
}, {
name: "80+",
stack: "Female",
data: [16358, 18576, 24586, 30352, 36724, 42939, 46413, 54984, 66029],
color: "pink"
}, {
name: "0-19",
stack: "Male",
data: [900268, 972205, 1031421, 1094547, 1155600, 1202766, 1244870, 1263637, 1268165],
color: "brown",
visibleInLegend: false
}, {
name: "20-39",
stack: "Male",
data: [509133, 579487, 655494, 749511, 844496, 916479, 973694, 1036548, 1099507],
color: "green",
...