score:0
the bar width is influenced through the options barpercentage
and categorypercentage
, which both need to be defined on the dataset
.
to find out about the relationship between barpercentage
and categorypercentage
, see here.
in case you simply want to see the existing bars closer to each other, you need to change the height of the chart. this can be done directly on the canvas
as follows:
<canvas id="canvas" height="40"></canvas>
please have a look at the following code snippet.
new chart(document.getelementbyid('canvas'), {
type: 'horizontalbar',
data: {
labels: ['a', 'b'],
datasets: [{
label: 'data',
data: [15, 8],
backgroundcolor: 'rgba(0, 0, 255, 0.2)',
bordercolor: 'rgb(0, 0, 255)',
borderwidth: 1
}]
},
options: {
responsive: true,
legend: {
display: false
},
title: {
display: false
},
scales: {
xaxes: [{
ticks: {
beginatzero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<canvas id="canvas" height="40"></canvas>
Source: stackoverflow.com
Related Query
- Chart.js Bar Chart change width (not duplicated to bar width questions!)
- Angular-Charts bar chart does not update when I change the data, series, labels
- chart js 2 how to set bar width
- Chart.js: bar chart first bar and last bar not displaying in full
- ChartJs bar chart - keep bars left instead of equally spread across the width
- Chart.js: width and height of a pie chart not respected
- Chart js - Get bar width after render
- chart.js bar chart color change based on value
- ChartJS bar chart fixed width for dynamic data sets
- How to change Chart.js horizontal bar chart Width?
- Chart.js Date and Time Bar Chart Not Rendering - Line Works Though
- Bar Chart of ChartJS does not Render
- Vertical Bar Chart not displaying Correctly
- chart js chart bar chart not showing data from 0
- Chartkick-vue bar chart - "horizontalBar" is not a registered controller
- angular-chart.js doughnut chart : How do I change width of the arc of a doughnut?
- Legend not displaying on Line or Bar chart - React-Chartjs-2
- ChartJS 2.6 - Change color of bar in Bar chart programmatically
- Chartjs with Vue, Bar Chart Border Radius not working
- How to style a pie chart in chart js? I want to change the border color, border width and give them shadow
- Bar Chart Not Stacking When Using ChartJs
- Alternating bars in bar chart in chart.js are not labelled
- Charts.js - Colors for stacked bar on multi-series line/bar chart are not working
- Why is this bar chart using chart.js not rendering in react.js?
- Charts.js - Bar chart different colors for value intervals not working
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- Chartjs Stacked bar chart not displaying correctly
- Stacked Bar chart fixed width bar chart issue - Chartjs
- Dynamic data in bar chart not rendering React js
- Chart.js in Angular 10: Specified colors not shown in multi-series bar chart (instead random colors)
More Query from same tag
- Angular / ng2-charts: Fetching json data in chart object showing: Cannot read property 'length' of undefined
- How to modify bar width in Chartjs 2 bar charts
- is there a way to do automatic scrolling?
- how to resize specific gridline(s) in chart.js
- Why is my chart not working? What am I missing
- Chart.JS: How can I only display data labels when the bar width is big enough for the text?
- React + Chart.js 2.0: How to put a label inside of a doughnut chart?
- ChartJS is not rendered
- chart.js wide bar with time scale
- How to add Dyamic JSON Dropdown Menu in Angular JS
- Bar Chart in Angular JS Using Chartjs
- Can't find the chart.js v2 docs
- Chart.JS Display 5 largest values in the legend
- How do you insert a linear horizontal line in chart.js
- Set height of chart in Chart.js
- Chart JS not rendering on iOS devices
- Chart.js v3.7.1 Chart is not a Constructor
- Chart Js invisible horizontal bar
- Can't reuse a template in Vue.js
- Problem with changing string to date with time
- Type 'import("/@types/chart.js/index.d.ts")' is missing the following properties from type 'any[]': length, pop, push, concat, and 26 more
- ChartJS: Custom legend not showing Labels for Multi-Pie chart
- Laravel PDF generation with Graph and send it with Email
- How to trigger ChartJS legend onClick with out interrupting its normal working
- Chart.js y axis labels are truncated
- Referencing locally declared variable into an array for data for chartjs
- How to add labels into Chart.js canvas plugin?
- Not able to see values on bar chart
- Chart.js: Fixed horizontal location of vertical axis
- Resizable/Expendable box annotation in ChartJs