JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div id="chartContainer-1"></div>
</div>
<div class="col-md-6">
<div id="chartContainer-2"></div>
</div>
</div>
</div>
JavaScript
//var chart =
$("#chartContainer-1").CanvasJSChart({
animationEnabled: true,
animationDuration: 2000,
title: {
text: "Ocupación Camas Hombres x Sector",
fontFamily: "Times New Roman",
fontSize: 20
},
axisY: {
title: "Camas Hombres",
suffix: "%",
includeZero: false
},
data: [{
bevelEnabled: true,
type: "pie",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55},
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14}
]
}]
});
$("#chartContainer-2").CanvasJSChart({
animationEnabled: true,
animationDuration: 2000,
title: {
text: "Ocupación Camas Mujeres x Sector",
fontFamily: "Times New Roman",
fontSize: 20
},
axisY: {
title: "Camas Mujeres",
suffix: "%",
includeZero: false
},
data: [{
bevelEnabled: true,
type: "column",
dataPoints: [
{ x: 10, y: 41 },
{ x: 20, y: 15},
{ x: 30, y: 35 },
{ x: 40, y: 58 },
{ x: 50, y: 65 },
{ x: 60, y: 13 },
{ x: 70, y: 18 },
{ x: 80, y: 91 },
{ x: 90, y: 55}
]
}]
});
//chart.render();