question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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