Column chart : custom the space between bars

See original GitHub issue

Is 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.

image

Describe the solution you’d like A property to change the scale of x/y axes. I would like to make thin & tight bars : image

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:closed
  • Created 4 years ago
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

22reactions
StarryFirecommented, Nov 4, 2020
stroke: {
    colors: ['transparent'],
    width: 2,    
}

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.

8reactions
eved42commented, Mar 3, 2020

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found