Customize padding for Apexchart Line Chart

Hi folks,

In the past months, there was a discussion I opened by having a problem with custom padding for apexchart line chart. Unfortunately, I couldn’t get an alternative solution that I expected from the library supporters. So I thought about how to fix this problem and I came up with a different solution. In this article, I will show you how you can give custom padding for line chart. I will go through an example assuming you are using Apexchart. (If you are using apexchart for the first time, I recommend you to read the documentation). Let’s start without wasting time. I will make my example using vue3 composition API. We enter the chartOptions and series values required for chart drawing.

<template>
  <div id="chart">
    <apexchart
      type="line"
      width="100%"
      height="216"
      :options="chartOptions"
      :series="series"
    />
  </div>
</template>
<script setup>
import Apexchart from 'vue3-apexcharts';

const series = [
  {
    name: 'PRODUCT A',
    data: [44, 55, 41, 67, 22, 43],
  },
  {
    name: 'PRODUCT B',
    data: [13, 23, 20, 8, 13, 27],
  },
  {
    name: 'PRODUCT C',
    data: [11, 17, 15, 15, 21, 14],
  },
  {
    name: 'PRODUCT D',
    data: [21, 0, 25, 13, 22, 8],
  },
];

const chartOptions = {
  chart: {
    type: 'line',
    stacked: false,
    toolbar: {
      show: false,
      tools: {
        download: false,
      },
    },
    zoom: {
      enabled: false,
    },
  },
  xaxis: {
    type: 'datetime',
    categories: [
      '01/01/2011 GMT',
      '01/02/2011 GMT',
      '01/03/2011 GMT',
      '01/04/2011 GMT',
      '01/05/2011 GMT',
      '01/06/2011 GMT',
    ],
    axisTicks: {
      show: false,
    },
  },
  legend: {
    show: false,
  },
  fill: {
    opacity: 1,
  },
};
</script>

If you write the series and chartOptions values for the line chart in the code above in this way, you will get an image like below.

Our goal here is to be able to give the desired padding value to the chart from the right and left within the line lines. For this we need to use the grid property in chartOptions. However, we will remove the lines that apexchart gives us ready-made and we will redraw them ourselves with html css. We start customizing by adding the following grid code to chartOptions. Here we add our own custom padding values and remove the lines drawn by the chart.

grid: {
 xaxis: {
   lines: {
     show: false,
   },
 },
 yaxis: {
   lines: {
     show: false,
   },
 },
 padding: {
   top: 0,
   right: 40,
   bottom: 0,
   left: 40,
 },
},

After this process, we add the necessary code to draw the line ourselves in the template and make the lines suitable for the chart with styling.

<template>
   <div class="chart" id="chart">
     <div class="chart-lines">
       <div v-for="num of 5" :key="num" class="chart-line-wrapper">
         <div class="chart-line" />
       </div>
     </div>
     <apexchart
       type="line"
       width="100%"
       height="216"
       :options="chartOptions"
       :series="series"
     />
   </div>
</template>

<style scoped>

.chart {
   position: relative;
}

.chart-lines {
   height: 100%;
   position: absolute;
   width: 100%;
}

.chart-line-wrapper {
   align-items: flex-start;
   box-shadow: inset 0 -1px 0 0 rgba(72, 72, 143, 0.15);
   display: flex;
   flex-direction: column;
   height: 14px;
   padding: 12px;
}
</style>

After these grid updates and styling operations, you should get an output like this.

If you want to examine the code in more detail 👉 Codesandbox