JSFiddle - React, Tailwind, and code Playground

Canvasjs

by lokesh005

HTML

<div id="chartContainer2" style="width:60%; height:300px"></div>
	<div id="chartContainer3" style="width:60%; height:300px;transform:translate(0px ,50px)"></div>

JavaScript

var dataPoints1 = [
		{ x: 10, y: 71 , label:"Murder"},
        { x: 20, y: 55, label:"Commit Murder"},
        { x: 30, y: 50 , label:"Rape"},
        { x: 40, y: 65 , label:"Dacoity"},
        { x: 50, y: 95 , label:"Robbery"},
        { x: 60, y: 68 , label:"Grievous Hurt"},
        { x: 70, y: 28 , label:"Extortion"},
        { x: 80, y: 34, label:"Cheating" } ];

	var dataPoints2 = [
		{ x: 5, y: 427, label: "Constables"},
		{ x: 10, y: 178, label: "Head-Constables"},
		{ x: 15, y: 68, label: "Assistant Sub-Inspector"},
		{ x: 20, y: 38, label: "Sub-Inspector"},
		{ x: 25, y: 9, label: "Inspector"},
		{ x: 30, y: 11, label: "Other Gazetted Officers"} ];

	var dataPoints3 = [ 
        { x: 10, y: 171, label:"Murder"},
        { x: 20, y: 155, label:"Commit Murder"},
        { x: 30, y: 150 , label:"Rape"},
        { x: 40, y: 165, label:"Dacoity" },
        { x: 50, y: 195, label:"Robbery" },
        { x: 60, y: 168, label:"Grievous Hurt" },
        { x: 70, y: 128 , label:"Extortion"},
        { x: 80, y: 134 , label:"Cheating"}    
       ];
	
renderMyChart(chartContainer2, dataPoints2);
renderMyChart(chartContainer3, dataPoints3,dataPoints1);
	
function renderMyChart(chartContainer2, myData) {
    var chart = new CanvasJS.Chart(chartContainer2, {
 
  title:{
      text: "Police Personnel Killed or Injured on Duty During 2014"  
      },

 data: [
            {
                type: "column",
                dataPoints: myData
            }
        ]
    });
    chart.render();
}
function renderMyChart(chartContainer3, myData1,myData2) {
    var chart = new CanvasJS.Chart(chartContainer3, {
  toolTip: {
        shared: "true"  //disable here. 
      },
  title:{
      text: "Incidence,No. of Victims of Crimes Committed Against Senior Citizens During 2014"  
      },

 data: [
            {
                type: "stackedColumn",
				name:"Incidence",
                dataPoints: myData1
            },
			{
				type: "stackedColumn",
				name:"Vic",
          ...