Geek Answers Handbook

Chart.js: line spacing in a horizontal bar chart

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 the distance between the strips. I tried categorySpacing, barValueSpacing ... But nothing works! It looks great in a small width, but with the full width of the screen, the height increases due to the distance between the strips. Inline css for canvas does not work as it is overridden by default chartjs. In addition, I can not set the height of the graph when initializing the chart: ctx1.canvas.height = 300; This does not work! jsfiddle link link

+6
source share
2 answers

The interval between bars can be removed by setting the barPercentage and categoryPercentage to 1:

 yAxes: [{ barPercentage: 1.0, categoryPercentage: 1.0, }],

However, barThickness seems to override these settings. The only solution I found was to set the height of the parent of the chart to a fixed value, set the maintainAspectRatio parameter to false, and remove barThickness .

NOTE. I am using angular -chart.js

+3
source

Import the chart.js file. The library file in which the error occurs is missing. https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js

0
source

More articles:


All Articles