Column chart : custom the space between bars
See original GitHub issueIs your feature request related to a problem? Please describe. I’m frustrated because I don’t find the solution to manage easily the space between the bars.
Describe the solution you’d like A property to change the scale of x/y axes. I would like to make thin & tight bars :
Describe alternatives you’ve considered
I tried to change the plotOptions
> bar
> columnWidth
property, testing with stroke
property too, change the grid
parameters…
Additional context Code :
var totalChart = new ApexCharts(document.querySelector("#totalChart"), {
series: [{
name: 'Contrats',
data: $('#totalChart').data('stats').split(',')
}],
chart: {
type: 'bar',
height: '170px',
toolbar: { show: false },
foreColor: '#657a8e',
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '20%',
distributed: true,
colors: {
backgroundBarColors: ['#F2F4F6']
},
}
},
legend: { show: false },
xaxis: {
axisBorder: { show: false },
axisTicks: { show: false },
categories: [
'Cadre', 'MPDV', 'Groupement', 'Indirect'
],
labels: {
style: {
fontSize: '12px'
}
}
},
yaxis: { show: false },
colors: ['#007BFF'],
grid: {
show: false,
},
tooltip: {
y: {
formatter: function (val) {
return val;
}
}
}
});
Issue Analytics
- State:
- Created 4 years ago
- Comments:9 (2 by maintainers)
Top Results From Across the Web
Chart.js Bar Chart: How to remove space between the bars in ...
I'm trying to remove the space between my bar chart bars, but even though I see this solution many places it doesn't work...
Read more >How to Adjust Your Bar Chart's Spacing in Microsoft Excel
Learn how to widen your bar charts by minimizing the "Gap Width" betw ... ... If each bar is 1 centimeter wide, then...
Read more >3.6 Adjusting Bar Width and Spacing - R Graphics Cookbook
To add space between bars within a group, make width smaller and set the value for position_dodge to be larger than width (Figure...
Read more >How do I add spacing between bars within a multi-bar chart?
Answers · 1. Right-click the whole chart, and then select the Series Properties. · 2. Switch to Border tab, you can set the...
Read more >Visualization: Column Chart - Google Developers
A column chart is a vertical bar chart rendered in the browser using SVG or VML, ... clearer label formatting, tighter default spacing...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I was able to add space between the columns/bars using the above stroke property in options. Putting this here so it might help someone else.
See codepen
I just noticed that I don’t have the same result on Chrome and Firefox with codepen. I don’t have a bug on the last label on Chrome in my real project, all the 4 labels are displayed.
No
columnWidth
just resizes the width of the bars and not resize the space between each bar.I know when the bars are heavy, there is less space between them but I want thin bars and a small space between them.