How can I fix my chart, the problem is that I have many horizontal bars, so the chart breaks.
var barOptions_stacked = {
tooltips: {
enabled: false
},
hover :{
animationDuration:0
},
scales: {
xAxes: [{
ticks: {
beginAtZero:true,
fontFamily: "'Open Sans Bold', sans-serif",
fontSize:11
},
scaleLabel:{
display:false
},
gridLines: {
},
stacked: true
}],
yAxes: [{
gridLines: {
display:false,
color: "#fff",
zeroLineColor: "#fff",
zeroLineWidth: 0
},
ticks: {
fontFamily: "'Open Sans Bold', sans-serif",
fontSize:11
},
stacked: true
}]
},
legend:{
display:false
},
};
var ctx = document.getElementById("Chart1");
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["2014", "2013", "2012", "2011","2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011", "2014", "2013", "2012", "2011"],
datasets: [{
data: [727, 589, 537, 543, 574],
backgroundColor: "rgba(63,103,126,1)",
hoverBackgroundColor: "rgba(50,90,100,1)"
}]
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js"></script>
<div class="graph_container">
<canvas id="Chart1"></canvas>
</div>I tried to use a scroll, but it didn't work well. Because the size of the bars are too small and is impossible to read
What would be the best solution for this ? Any suggestion ?