ApexCharts: Line graph overflowing out of Y axes

Hope you guys are doing okay.

I am working on a line graph from Apex Charts and every thing seems to be working fine except one issue.

The lines cross-over/overflows on the y axes whereas they are supposed to stay between the y axes. I have tried adding offsetX to almost everything but it just doesn't seem to work.

What is it that I am doing wrong here? How can I fix it?

Here's CODEPEN.

Here's an image of the issue:

Here's the snippet:

const lineChartEl = document.querySelector('#line-chart');


const lineChartOptions = {
  chart: {
    height: '380',
    width: "100%",
    type: "line",
    dropShadow: {
      enabled: true,
      enabledOnSeries: undefined,
      top: 0,
      left: 0,
      blur: 3,
      color: '#000',
      opacity: 0.35
    },
    foreColor: 'red', // numbers color
    toolbar: {
      show: true,
      offsetX: -30,
      offsetY: 0,
      tools: {
        download: true,
        selection: true,
        zoom: false,
        zoomin: false,
        zoomout: false,
        pan: false,
        reset: true | '<img src="/static/icons/reset.png" width="20">',
        customIcons: []
      },
      export: {
        csv: {
          filename: 'data',
          columnDelimiter: ',',
          headerCategory: 'category',
          headerValue: 'value',
          dateFormatter(timestamp) {
            return new Date(timestamp).toDateString()
          }
        },
        svg: {
          filename: 'data',
        },
        png: {
          filename: 'data',
        }
      }
    },
    autoSelected: 'zoom'
  },
  legend: {
    position: 'top'
  },
  grid: {
    show: true,
    padding: {
      left: 0,
      right: 0
    },
    borderColor: "rgba(0,0,0,0.1)"
  },
  colors: ['red', 'blue', 'yellow'],
  stroke: {
    width: 2,
  },
  tooltip: {
    theme: "dark"
  },
  series: [{
      name: "Cost",
      data: [0, 1042, 2120, 3340, 4013, 5012, 6750, 7520, 8055, 9210]
    },
    {
      name: "Revenue",
      data: [1131, 2311, 3143, 4565, 6012, 7750, 8520, 9055, 10210, 7530]
    },
    {
      name: "Profit %",
      data: [2, 5, 3, 4, 6, 3.4, 2.2, 5.2, 1.3, 3.8]
    }
  ],
  yaxis: [{
      title: {
        text: "Cost / Revenue"
      },
      seriesName: "Cost",
      tickAmount: 5,
      axisBorder: {
        show: true,
        color: 'red'
      },
      axisTicks: {
        show: true,
        color: 'blue'
      },
      crosshairs: {
        show: true,
        position: 'back',
        stroke: {
          color: '#b6b6b6',
          width: 1,
          dashArray: 0,
        },
      },
      tooltip: {
        enabled: true,
        offsetX: 0,
      },
    },
    {
      title: {
        text: "Kilograms"
      },
      seriesName: "Weight 1",
      show: false
    },
    {
      title: {
        text: "Profit %"
      },
      opposite: true,
      tickAmount: 5,
      seriesName: "Profit %",
      axisBorder: {
        show: true,
        color: 'red'
      },
      axisTicks: {
        show: true,
        color: 'blue'
      },
      crosshairs: {
        show: true,
        position: 'back',
        stroke: {
          color: '#b6b6b6',
          width: 1,
          dashArray: 0,
        },
      },
      tooltip: {
        enabled: true,
        offsetX: 0,
      },
    },
  ],
  xaxis: {
    tickPlacement: 'on',
    axisBorder: {
      color: 'red',
    },
    axisTicks: {
      color: 'blue',
    },
    tooltip: {
      enabled: false,
    }
  },

};



const lineChart = new ApexCharts(lineChartEl, lineChartOptions);
lineChart.render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.27.3/apexcharts.min.js"></script>
<div id="line-chart"></div>

Solution

You can fix it by removing padding inside grid options:

const lineChartEl = document.querySelector('#line-chart');


const lineChartOptions = {
  chart: {
    height: '380',
    width: "100%",
    type: "line",
    dropShadow: {
      enabled: true,
      enabledOnSeries: undefined,
      top: 0,
      left: 0,
      blur: 3,
      color: '#000',
      opacity: 0.35
    },
    foreColor: 'red', // numbers color
    toolbar: {
      show: true,
      offsetX: -30,
      offsetY: 0,
      tools: {
        download: true,
        selection: true,
        zoom: false,
        zoomin: false,
        zoomout: false,
        pan: false,
        reset: true | '<img src="/static/icons/reset.png" width="20">',
        customIcons: []
      },
      export: {
        csv: {
          filename: 'data',
          columnDelimiter: ',',
          headerCategory: 'category',
          headerValue: 'value',
          dateFormatter(timestamp) {
            return new Date(timestamp).toDateString()
          }
        },
        svg: {
          filename: 'data',
        },
        png: {
          filename: 'data',
        }
      }
    },
    autoSelected: 'zoom'
  },
  legend: {
    position: 'top'
  },
  grid: {
    show: true,
    borderColor: "rgba(0,0,0,0.1)"
  },
  colors: ['red', 'blue', 'yellow'],
  stroke: {
    width: 2,
  },
  tooltip: {
    theme: "dark"
  },
  series: [{
      name: "Cost",
      data: [0, 1042, 2120, 3340, 4013, 5012, 6750, 7520, 8055, 9210]
    },
    {
      name: "Revenue",
      data: [1131, 2311, 3143, 4565, 6012, 7750, 8520, 9055, 10210, 7530]
    },
    {
      name: "Profit %",
      data: [2, 5, 3, 4, 6, 3.4, 2.2, 5.2, 1.3, 3.8]
    }
  ],
  yaxis: [{
      title: {
        text: "Cost / Revenue"
      },
      seriesName: "Cost",
      tickAmount: 5,
      axisBorder: {
        show: true,
        color: 'red'
      },
      axisTicks: {
        show: true,
        color: 'blue'
      },
      crosshairs: {
        show: true,
        position: 'back',
        stroke: {
          color: '#b6b6b6',
          width: 1,
          dashArray: 0,
        },
      },
      tooltip: {
        enabled: true,
        offsetX: 0,
      },
    },
    {
      title: {
        text: "Kilograms"
      },
      seriesName: "Weight 1",
      show: false
    },
    {
      title: {
        text: "Profit %"
      },
      opposite: true,
      tickAmount: 5,
      seriesName: "Profit %",
      axisBorder: {
        show: true,
        color: 'red'
      },
      axisTicks: {
        show: true,
        color: 'blue'
      },
      crosshairs: {
        show: true,
        position: 'back',
        stroke: {
          color: '#b6b6b6',
          width: 1,
          dashArray: 0,
        },
      },
      tooltip: {
        enabled: true,
        offsetX: 0,
      },
    },
  ],
  xaxis: {
    tickPlacement: 'on',
    axisBorder: {
      color: 'red',
    },
    axisTicks: {
      color: 'blue',
    },
    tooltip: {
      enabled: false,
    }
  },

};



const lineChart = new ApexCharts(lineChartEl, lineChartOptions);
lineChart.render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.27.3/apexcharts.min.js"></script>
<div id="line-chart"></div>