JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
JavaScript
var obj = {
"and": 2,
"two": 1,
"too": 1,
"mother": 2
};
var ctx = document.getElementById("myChart");
var data = {
labels: [],
datasets: [{
label: "My dataset",
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
data: []
}]
};
Chart.pluginService.register({
beforeInit: function(chart) {
var data = chart.config.data;
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
data.labels.push(key);
data.datasets[0].data.push(obj[key]);
}
}
}
});
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});