javascript - How to add background color for apexcharts y-axis?

Using apex chart

My code - Fiddle

var options = {
  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, 7, 25, 13, 22, 8]
  }],
  chart: {
    type: 'bar',
    height: 350,
    stacked: true,
    toolbar: {
      show: true
    },
    zoom: {
      enabled: true
    }
  },
  responsive: [{
    breakpoint: 480,
    options: {
      legend: {
        position: 'bottom',
        offsetX: -10,
        offsetY: 0
      }
    }
  }],
  plotOptions: {
    bar: {
      borderRadius: 8,
      horizontal: 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'
    ],
  },
  yaxis: {
    labels: {
      style: {
        fontSize: "12px",
        fontWeight: 400,
        fontFamily: "Open Sans",
        colors: ["#7286EA"],
        backgroundColor: '#e7e7e7',
        },
      },
   },
  
  legend: {
    position: 'right',
    offsetY: 40
  },
  fill: {
    opacity: 1
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

<script src=""></script>
<div id="chart" class="apex-charts" dir="ltr"></div>

Using apex chart

My code - Fiddle

var options = {
  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, 7, 25, 13, 22, 8]
  }],
  chart: {
    type: 'bar',
    height: 350,
    stacked: true,
    toolbar: {
      show: true
    },
    zoom: {
      enabled: true
    }
  },
  responsive: [{
    breakpoint: 480,
    options: {
      legend: {
        position: 'bottom',
        offsetX: -10,
        offsetY: 0
      }
    }
  }],
  plotOptions: {
    bar: {
      borderRadius: 8,
      horizontal: 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'
    ],
  },
  yaxis: {
    labels: {
      style: {
        fontSize: "12px",
        fontWeight: 400,
        fontFamily: "Open Sans",
        colors: ["#7286EA"],
        backgroundColor: '#e7e7e7',
        },
      },
   },
  
  legend: {
    position: 'right',
    offsetY: 40
  },
  fill: {
    opacity: 1
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

<script src="https://cdn.jsdelivr/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>

Add for yaxis labels style - backgroundColor: '#e7e7e7' - but it doesn't work

I try to do as in the image

Thanks in advance for any help

Share edited May 9, 2021 at 19:42 junedchhipa 5,6273 gold badges35 silver badges35 bronze badges asked May 6, 2021 at 7:44 Dmitriy 4,0513 gold badges31 silver badges40 bronze badges

Add a ment |

4 Answers 4

Sorted by: Reset to default 6 +500

How to add background color for Apexcharts y-axis?

You can add a background playing with javascript and the SVG Apexcharts made.

You can access the SVG they create through querySelector then add elements or other tricks you could think of to make it the way you want.

This lets you be very flexible and do exactly what you want.

   var options = {
    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, 7, 25, 13, 22, 8]
      }
    ],
    chart: {
      type: 'bar',
      height: 350,
      stacked: true,
      toolbar: {
        show: true
      },
      zoom: {
        enabled: true
      },
      events: {
        mounted: function() {
          addYAxisBackground()
        },
        updated: function() {
          addYAxisBackground()
        }
      }
    },
    responsive: [
      {
        breakpoint: 480,
        options: {
          legend: {
            position: 'bottom',
            offsetX: -10,
            offsetY: 0
          }
        }
      }
    ],
    plotOptions: {
      bar: {
        borderRadius: 8,
        horizontal: 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'
      ]
    },
    yaxis: {
      labels: {
        style: {
          fontSize: '12px',
          fontWeight: 400,
          fontFamily: 'Open Sans',
          colors: ['#7286EA'],
          backgroundColor: '#e7e7e7'
        }
      }
    },

    legend: {
      position: 'right',
      offsetY: 40
    },
    fill: {
      opacity: 1
    }
  }

  var chart = new ApexCharts(document.querySelector('#chart'), options)
  chart.render()

  function addYAxisBackground() {
    var ctx = document.querySelector('svg'),
      textElm = ctx.querySelector('svg g'),
      SVGRect = textElm.getBBox()

    var rect = document.createElementNS(
      'http://www.w3/2000/svg',
      'rect'
    )
    rect.setAttribute('x', SVGRect.x)
    rect.setAttribute('y', SVGRect.y)
    rect.setAttribute('width', '90px')
    rect.setAttribute('height', SVGRect.height + 20)
    rect.setAttribute('fill', 'yellow')
    ctx.insertBefore(rect, textElm)
  }

<script src="https://cdn.jsdelivr/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>

I just used inspect and found the svg class for yaxis("apexcharts-yaxis-texts-g") and appended in it ,after trying some values made a rectangle which would somewhat cover the y-axis making it look like a background.

This might work for u.

Edit: Due to appending an element dynamically if the window is resized it would make that element disappeared, for that I used resize event which would fire a function after 500ms to re-add that element.

This counter of 500 ms gets restarted whenever there is a change in the window's dimensions (as we clear the timeout) so the function will only be called if the user stops resizing the window or if the user resizes the window VERY slowly which doesn't happens normally.

var options = {
  chart: {
    type: 'bar'
  },
  series: [{
    name: 'sales',
    data: [30, 40, 45, 50, 49, 60, 70, 91, 125]
  }],
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
  }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

var set = document.getElementsByClassName('apexcharts-yaxis-texts-g')[0];
var node = document.createElementNS("http://www.w3/2000/svg", "rect");
node.setAttribute('height', '91%');
node.setAttribute('width', '5%');
node.setAttribute('fill', 'cyan');


set.insertBefore(node, set.childNodes[0]);

var func;

window.addEventListener("resize", function(){
  clearTimeout(func);
func = setTimeout(doneResizing, 500);
})

function doneResizing(){
var set=document.getElementsByClassName('apexcharts-yaxis-texts-g')[0];
var node = document.createElementNS("http://www.w3/2000/svg","rect");
node.setAttribute('height','91%');
node.setAttribute('width','5%');
node.setAttribute('fill','cyan');


set.insertBefore(node, set.childNodes[0]);  
}

body {
  font-family: Roboto, sans-serif;
}

#chart {
  max-width: 650px;
  margin: 35px auto;
}

<script src="https://cdn.jsdelivr/npm/apexcharts"></script>
<div id="chart">

If you check the documentation, there is no backgroundColor as an option for yaxis.labels.style. yaxis.labels.style has the following options:

{
  colors: [],
  fontSize: '12px',
  fontFamily: 'Helvetica, Arial, sans-serif',
  fontWeight: 400,
  cssClass: 'apexcharts-yaxis-label'
}

Here are the Docs: https://apexcharts./docs/options/yaxis/#formatter

Here is a simple way to do this by using CSS variables and background.

function updateBackground() {
  const chart = document.querySelector('.apexcharts-canvas');
  const yAxis = document.querySelector('.apexcharts-yaxis');
  const transform = yAxis.getAttribute('transform');
  const translateX = transform.slice(transform.indexOf('(') + 1, transform.indexOf(','));
  
  const yAxisBBox = yAxis.getBBox();
  // console.log('yAxisBBox', yAxisBBox);
  
  chart.style.setProperty('--width', yAxisBBox.width + 'px');
  chart.style.setProperty('--x', (+translateX + yAxisBBox.x) + 'px');
}

var options = {
  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, 7, 25, 13, 22, 8]
  }],
  chart: {
    type: 'bar',
    height: 350,
    stacked: true,
    toolbar: {
      show: true
    },
    zoom: {
      enabled: true
    },
    events: {
      /* run the function on mounted and updated hooks */
      mounted: updateBackground,
      updated: updateBackground
    }
  },
  responsive: [{
    breakpoint: 480,
    options: {
      legend: {
        position: 'bottom',
        offsetX: -10,
        offsetY: 0
      }
    }
  }],
  plotOptions: {
    bar: {
      borderRadius: 8,
      horizontal: 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'
    ],
  },
  yaxis: {
    labels: {
      style: {
        fontSize: "12px",
        fontWeight: 400,
        fontFamily: "Open Sans",
        colors: ["#7286EA"],
        backgroundColor: '#e7e7e7',
      },
    },
  },

  legend: {
    position: 'right',
    offsetY: 40
  },
  fill: {
    opacity: 1
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

.apexcharts-canvas {
  --padding-x: 10px; /* you can change this by 0 or anything you want */
  background-image: linear-gradient(yellow, yellow);
  background-position: calc(var(--x) - var(--padding-x)) 0;
  background-size: calc(var(--width) + var(--padding-x) * 2) 100%;
  background-repeat: no-repeat;
}

<script src="https://cdn.jsdelivr/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>

Cover exact area:

function updateBackground() {
  const chart = document.querySelector('.apexcharts-canvas');
  const yAxis = document.querySelector('.apexcharts-yaxis');
  const transform = yAxis.getAttribute('transform');
  const translateX = transform.slice(transform.indexOf('(') + 1, transform.indexOf(','));
  
  const yAxisBBox = yAxis.getBBox();
  // console.log('yAxisBBox', yAxisBBox);
  
  chart.style.setProperty('--width', yAxisBBox.width + 'px');
  chart.style.setProperty('--height', yAxisBBox.height + 'px');
  chart.style.setProperty('--x', (+translateX + yAxisBBox.x) + 'px');
  chart.style.setProperty('--y', yAxisBBox.y + 'px');
}

var options = {
  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, 7, 25, 13, 22, 8]
  }],
  chart: {
    type: 'bar',
    height: 350,
    stacked: true,
    toolbar: {
      show: true
    },
    zoom: {
      enabled: true
    },
    events: {
      /* run the function on mounted and updated hooks */
      mounted: updateBackground,
      updated: updateBackground
    }
  },
  responsive: [{
    breakpoint: 480,
    options: {
      legend: {
        position: 'bottom',
        offsetX: -10,
        offsetY: 0
      }
    }
  }],
  plotOptions: {
    bar: {
      borderRadius: 8,
      horizontal: 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'
    ],
  },
  yaxis: {
    labels: {
      style: {
        fontSize: "12px",
        fontWeight: 400,
        fontFamily: "Open Sans",
        colors: ["#7286EA"],
        backgroundColor: '#e7e7e7',
      },
    },
  },

  legend: {
    position: 'right',
    offsetY: 40
  },
  fill: {
    opacity: 1
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

.apexcharts-canvas {
  background: linear-gradient(yellow, yellow) var(--x) var(--y) / var(--width) var(--height) no-repeat;
}

<script src="https://cdn.jsdelivr/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to add background color for apexcharts y-axis? - Stack Overflow

4 Answers 4

This might work for u.

与本文相关的文章

评论列表(0)