Make Chart Margins and Padding Optional/Adjustable

[benhaynes]

Is your feature request related to a problem? Please describe.

We have removed the left axis labels, but can't left-align the chart because the entire element has been translated:

<g class="apexcharts-inner apexcharts-graphical" transform="translate(20, 30)">

• Red Line: This is the left SVG bound, where we would like to align the chart.
• Green Line: This is where the chart begins because of the translate. Margin should be optional
• Blue Line: This is where the series data starts, this data should also be optional
• Orange Lines: The same data padding on the right side should be optional

Describe the solution you'd like

Give options to remove/adjust these margins/padding (currently the only way is to use Sparklines, but this limits other options)

Describe alternatives you've considered

Forking repo; manual/external CSS overrides; masking with external elements; etc

Additional context

n/a

[junedchhipa]

@benhaynes Good point. I agree that these offset values need to be in the config to allow easier changes in the layout. Otherwise, it becomes a pain to fit in the design.

[benhaynes]

Awesome, thank you!

No problem — we manage OSS too, so I know how useful a well-written issue is. ;)

[junedchhipa]

Ah! Just checked out one of your repository - directus, and I'm really impressed. Keep up the great work.

[benhaynes]

Thanks, and likewise! APEXCHARTS has been a pleasure to work with so far!

[junedchhipa]

@benhaynes The way to remove all paddings/margins would be

1. hide the y-axis by yaxis.show = false
2. Remove the default grid paddings

grid: {
  padding: {
    left: 0,
    right: 0
  }
}

This should remove all unnecessary spacings. Let me know if the above settings worked.

This update is available in v2.2.0

[benhaynes]

Excellent! This seems to be working on our side. Thank you so much for the quick turn-around!

Keep up the great work!

[navotera]

Here the result : I think there are white space (not very good look)

Is there any config to achive like this :

Great Library, Thank

[junedchhipa]

@navotera Please post a codepen of your example.

[yairEO]

@junedchhipa - I found a "bug", or at least an inconsistency, regarding your tip to remove padding.

It does not work for a bar chart which has horizontal: true in the plotOptions:

Demo: https://codepen.io/vsync/pen/XvMPGq

---

I write this because of another bug found for that configuration which I have opened but nobody addressed it... https://github.com/apexcharts/apexcharts.js/issues/815

:(

[Niall-Kenny]

Hi there,

just wondering how to remove the whitespace on the left of the graph in react.

[inoda]

Is there a way to keep the y-axis labels but still remove the extra padding on the left? It's unideal that the only way to get rid of it is by removing helpful labeling.

[michaeljakob]

I have the exact same bug. How to remove all the margin there?

[michaeljakob]

We fixed it by adding the following CSS to <apexchart /> in VueJS.

`

the_chart {

left: -10px; position: relative; } `

[junedchhipa]

One more way to adjust the left spacing of the y-axis

yaxis: {
  labels: {
    offsetX: -10
  }
},
grid: {
  padding: {
    left: -5
  }
}

[imgnx]

This worked well for me when trying to get a chart to fit inside of a 300px block-level element.

  yaxis: {
    labels: {
      offsetX: -25,
      rotate: -90,
    },
  },
  grid: {
    padding: {
      left: -25,
    },
  },

[stonehubvn]

Check it: https://github.com/apexcharts/vue-apexcharts/issues/44#issuecomment-456072048 A full example of your updated jsfiddle

[pacocom]

I have same problems @Niall-Kenny https://github.com/apexcharts/apexcharts.js/issues/178#issuecomment-539956398. Imposible to remove this margin! This library has a lot of bug.

[junedchhipa]

@pacocom I have posted a possible solution for the left margin in this comment

[pacocom]

@junedchhipa Thank!

Now, In my case I try

grid: {
  padding: {
    left: -16
  }
}

and it works, but I don't know why in another case is letf: -5.

Thanks!

[menooa25]

 labels: {
    offsetX: -10
  }

thank you so much for this <3

[belcorpRaguirre]

@junedchhipa - I found a "bug", or at least an inconsistency, regarding your tip to remove padding.

It does not work for a bar chart which has horizontal: true in the plotOptions:

Demo: https://codepen.io/vsync/pen/XvMPGq

I write this because of another bug found for that configuration which I have opened but nobody addressed it... #815

:(

hi i have the same problem, any solution for this?

[belcorpRaguirre]

Here the result : I think there are white space (not very good look)

Is there any config to achive like this :

Great Library, Thank

same problem

[omerzirh]

Same issue @junedchhipa

[HunterSandlin]

Same issue @junedchhipa

Can you share a codepen?

[omerzirh]

Sorry, I dont have code anymore. It's resolved by teammate.

[HunterSandlin]

Darn, I'm working on a similar thing and want to add those gaps to a bar chart. Thanks for responding anyway! Glad you solved it!

[eUunice]

Hi All, How to remove the space after ? my hands still can moveing when it not have more data , on the lineChart and barChart @junedchhipa

[Rubrasum]

I think some people are responding here with the same issue that I am having. I would like more space to drag the zoom tool. I am unable to capture the edge points with the drag zoom tool that you can find here; https://apexcharts.com/javascript-chart-demos/line-charts/zoomable-timeseries/

I have used padding and it didn't work because the selection does not start until you hit the grid. And adding blank X values also did not really give me the result I wanted, and seems inelegant anyways. Let me know if that is really the only solution here.

Here is an image of graph and the options object.

var options = {
            colors: ["#FDD023", "#FDD023"],
            series: [{
                name: 'Total KWh',
                data: data_points
            }],
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'straight'
            },
            title: {
                text: 'Billing data by ' + graph_type,
                align: 'middle'
            },
            grid: {
                show: true,
                yaxis: {
                    lines: {
                        show: true
                    }
                },
                borderColor: '#008ffb',
                strokeDashArray: 1,
                padding: {
                    top: 0,
                    right: 50,
                    bottom: 0,
                    left: 50
                },
            },
            chart: {
                type: 'line',
                'options': {
                    spanGaps: true // this is the property I found
                },
                stacked: false,
                height: 350,
                zoom: {
                    type: 'x',
                    enabled: true,
                    autoScaleYaxis: false
                },
                toolbar: {
                    autoSelected: 'zoom'
                },
                events: {
                    markerClick: function(event, chartContext, { seriesIndex, dataPointIndex, config}) {
                        // The last parameter config contains additional information like `seriesIndex` and `dataPointIndex` for cartesian charts
                        console.log('Event!');
                        console.log(dataPointIndex);
                    }
                }
            },
            xaxis: {
                labels: {
                    formatter: function (value) {// The formatter function overrides format property
                        const months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
                        let datetime = new Date(value);
                        return months[datetime.getMonth()] + ", "+datetime.getFullYear()

                    },
                },
                axisTicks: {
                    show: true,
                    borderType: 'solid',
                    color: '#78909C',
                    height: 6,
                    offsetX: 0,
                    offsetY: 0
                },
            },
            yaxis: {
                labels: {
                    formatter: function (value) {
                        return Math.round(value * 100) / 100 + " KWh";
                    }
                },
                title: {
                    text: "Total Kilowatt hours",
                    rotate: -90,
                    offsetX: 0,
                    offsetY: 0,
                    style: {
                        color: undefined,
                        fontSize: '12px',
                        fontFamily: 'Helvetica, Arial, sans-serif',
                        fontWeight: 600,
                        cssClass: 'apexcharts-yaxis-title',
                    },
                },
            },
            tooltip: {
                custom: function({series, seriesIndex, dataPointIndex, w}) {
                    var data = w.globals.initialSeries[seriesIndex].data[dataPointIndex];
                    console.log(data);

                    return `<div class="panel-heading">
                                <h1 class="panel-title">
                                    ` + data.xtitle + `
                                </h1>
                            </div>
                            <div class="panel-body">
                                <div class="totals-data-body">
                                    <strong>Total KWh: </strong> ` + data.y + `
                                </div>
                            </div>`;
                }
            }
        }```

[MizuBishi]

I am still having the the same problem. I tried everything which was mentioned in this chat. I cannot set fixed negative values (grid - padding- left) because therefore it depends on the screensize and fits not properly. Has anybody a solution to this?

[guestisp]

any idea on how to fix this ? having the white margin is not beautiful. as workaround i'm adding empty points but that's not good

[Naiimtj]

In my case, I added the "min" option to xaxis, importing the first starting value. In this case, it's for time. I hope that helps you :)

Example: xaxis: { type: 'datetime', min: initialDatetime, labels: { datetimeUTC: false, offsetY: 3, formatter(value) { const mydate = new Date(value); const minuts = mydate.getMinutes(value) < 10 ?0${mydate.getMinutes(value)}` : mydate.getMinutes(value);

      const mydatestr = `${mydate.getHours()}:${minuts}`;
      return mydatestr;
    },
  },
  title: {
    text: t('Time'),
  },
},`