Menu
horizontal bar chart
var barOptions_stacked1 = {
tooltips: {
enabled: true
},
hover: {
animationDuration: 0
},
scales: {
xAxes: [{
ticks: {
beginAtZero: true,
fontFamily: "'Open Sans Bold', sans-serif",
fontSize: 11
},
scaleLabel: {
display: false
},
gridLines: {
},
stacked: true
}],
yAxes: [{
barThickness: 20,
gridLines: {
display: false,
color: "#fff",
zeroLineColor: "#fff",
zeroLineWidth: 0
},
ticks: {
fontFamily: "'Open Sans Bold', sans-serif",
fontSize: 11
},
stacked: true
}]
},
legend: {
display: true
},
pointLabelFontFamily: "Quadon Extra Bold",
scaleFontFamily: "Quadon Extra Bold"
};
var ctx1 = document.getElementById("Chart1");
var myChart1 = new Chart(ctx1, {
type: 'horizontalBar',
data: {
labels: ["BU 5", "BU 4", "BU 3", "BU 2", "BU 1"],
datasets: [{
data: [727, 589, 537, 543, 574],
backgroundColor: "rgba(63,103,126,1)",
hoverBackgroundColor: "rgba(50,90,100,1)",
label: "newly request"
}, {
data: [238, 553, 746, 884, 903],
backgroundColor: "rgba(163,103,126,1)",
hoverBackgroundColor: "rgba(140,85,100,1)",
label: "in progress"
}, {
data: [1238, 553, 746, 884, 903],
backgroundColor: "rgba(63,203,226,1)",
hoverBackgroundColor: "rgba(46,185,235,1)",
label: "active"
}, {
data: [1338, 553, 746, 884, 903],
backgroundColor: "rgba(255,169,188,1)",
hoverBackgroundColor: "rgba(255,99,132,1)",
label: "in approval"
}, {
data: [1438, 553, 746, 884, 903],
backgroundColor: "rgba(136,202,247,1)",
hoverBackgroundColor: "rgba(54,162,235,1)",
label: "recycle"
}, {
data: [1538, 553, 746, 884, 903],
backgroundColor: "rgba(196,232,116,1)",
hoverBackgroundColor: "rgba(152,177,98,1)",
label: "reject"
}]
},
options: barOptions_stacked1
});<canvas id="Chart1"></canvas>How to reduce spacing between bars. I tried categorySpacing, barValueSpacing... But nothing works! It looks fine in small width, but when full screen width, it height increases because of the spacing between bars. Inline css for canvas doesnt work as it is overrided by default chartjs. Also, I am not able to set height of chart while initializing chart : ctx1.canvas.height = 300; It doesnt work! jsfiddle linklink
850
Setting Bar Spacing Options You can change the spacing of the bars on any bar or column chart by using the X Gap Ratio and Bar Gap Ratio options. X Gap Ratio is the amount of space between categories of bars. By default it is set at 100, meaning that the space between categories is 100% of the width of a bar.
A standard bar chart should have gaps between bars that are slightly narrower than the bars. The exceptions to this are the exception of histograms and clustered bar charts.
A bar chart may be either horizontal or vertical. The important point to note about bar charts is their bar length or height—the greater their length or height, the greater their value.
A horizontal bar chart is a variation on a vertical bar chart. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. To achieve this you will have to set the indexAxis property in the options object to 'y' . The default for this property is 'x' and thus will show vertical bars.
Bar Charts Unlike the Column chart, a JavaScript Bar Chart is oriented in a horizontal manner using rectangular bars. Horizontal Bar chart is the best tool for displaying comparisons between categories of data. You can display long data labels as the horizontal rectangles have enough room to stuff textual information.
Stacked bar charts can be used to show how one data series is made up of a number of smaller pieces. A horizontal bar chart is a variation on a vertical bar chart. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. To achieve this you will have to set the indexAxis property in the options object to 'y' .
Unlike the Column chart, a JavaScript Bar Chart is oriented in a horizontal manner using rectangular bars. Horizontal Bar chart is the best tool for displaying comparisons between categories of data. You can display long data labels as the horizontal rectangles have enough room to stuff textual information.
Bar spacing can be removed by setting both barPercentage and categoryPercentage to 1:
yAxes: [{
barPercentage: 1.0,
categoryPercentage: 1.0,
}],
However, barThickness seems to override these settings. The only solution I have found is to set the height of the parent element of the chart to a fixed value, set maintainAspectRatio option to false and remove the barThickness option.
NOTE: I'm using angular-chart.js
69
What worked for me was to force the height of the canvas:
document.getElementById("chart1").height = labels.length * 12 + 24;
The 12 is the height of the bar and the 12 is to accommodate the title and x-axis labels etc. You can remove the maintainAspectRatio: false, barPercentage, categoryPercentage etc options.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
