CODEWITHSUNDEEP
javascripthtmlcsssvgapexcharts
Dmitriy
Dmitriy

Reputation: 4503

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="https://cdn.jsdelivr.net/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 enter image description here

Thanks in advance for any help

Upvotes: 3

Views: 7216

Answers (4)

crg
crg

Reputation: 4557

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.org/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.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>

Upvotes: 6

doğukan
doğukan

Reputation: 27421

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.net/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.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>

Upvotes: 1

Aman Chadha
Aman Chadha

Reputation: 2496

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.org/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.org/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.net/npm/apexcharts"></script>
<div id="chart">

Upvotes: 3

NeNaD
NeNaD

Reputation: 20334

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.com/docs/options/yaxis/#formatter

Upvotes: 1

Related Questions