Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Apexcharts change color on bar per categories

I copied the demo for the apexcharts javascript Column Charts > Column with Group Label and I want to change the colors grouped by categories. How to do this? Here’s from the sample demo

var options = {
      series: [{
      name: "sales",
      data: [{
        x: '2019/01/01',
        y: 400
      }, {
        x: '2019/04/01',
        y: 430
      }, {
        x: '2019/07/01',
        y: 448
      }, {
        x: '2019/10/01',
        y: 470
      }, {
        x: '2020/01/01',
        y: 540
      }, {
        x: '2020/04/01',
        y: 580
      }, {
        x: '2020/07/01',
        y: 690
      }, {
        x: '2020/10/01',
        y: 690
      }]
    }],
      chart: {
      type: 'bar',
      height: 380
    },
    xaxis: {
      type: 'category',
      labels: {
        formatter: function(val) {
          return "Q" + dayjs(val).quarter()
        }
      },
      group: {
        style: {
          fontSize: '10px',
          fontWeight: 700
        },
        groups: [
          { title: '2019', cols: 4 },
          { title: '2020', cols: 4 }
        ]
      }
    },
    title: {
        text: 'Grouped Labels on the X-axis',
    },
    tooltip: {
      x: {
        formatter: function(val) {
          return "Q" + dayjs(val).quarter() + " " + dayjs(val).format("YYYY")
        }  
      }
    },
    };

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

I tried below but the first color applied to all bar columns.

colors: ['#FF0000', '#00FFFF']

Other try is but still the same. I cant get to work to update bar columns per category:

fill: {
        colors: [function({ value, seriesIndex, w }) {
            
            index = Math.floor(seriesIndex / $group_count);

            return '#7E36AF';
            
        }]
    },
Tags:

2

Answers


  1. 0 
    var options = {
      series: [{
      name: "sales",
      data: [{
        x: '2019/01/01',
        y: 400
      }, {
        x: '2019/04/01',
        y: 430
      }, {
        x: '2019/07/01',
        y: 448
      }, {
        x: '2019/10/01',
        y: 470
      }, {
        x: '2020/01/01',
        y: 540
      }, {
        x: '2020/04/01',
        y: 580
      }, {
        x: '2020/07/01',
        y: 690
      }, {
        x: '2020/10/01',
        y: 690
      }]
    }],
      chart: {
      type: 'bar',
      height: 380
    },
    xaxis: {
      type: 'category',
      labels: {
        formatter: function(val) {
          return "Q" + dayjs(val).quarter()
        }
      },
      group: {
        style: {
          fontSize: '10px',
          fontWeight: 700
        },
        groups: [
          { title: '2019', cols: 4 },
          { title: '2020', cols: 4 }
        ]
      }
    },
    title: {
        text: 'Grouped Labels on the X-axis',
    },
    tooltip: {
      x: {
        formatter: function(val) {
          return "Q" + dayjs(val).quarter() + " " + dayjs(val).format("YYYY")
        }  
      }
    },
    };

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

    I tried below but the first color applied to all bar columns.

    colors: ['#FF0000', '#00FFFF']

    Another try is still the same. I can’t get to work to update bar columns per category:

    fill: {
        colors: [function({ value, seriesIndex, w }) {
            
            index = Math.floor(seriesIndex / $group_count);

            return '#7E36AF';
            
        }]
    },
    Login or Signup to reply.
  2. 0

    Axis groups can only be used to format that axis’ labels; the groups
    cannot be used to target properties of the bars themselves.

    If colors are the only thing you want to change, the simplest way is to
    assign individual colors for each data point, see the
    docs on column charts at "Changing the color of a particular data-point":

       data: [{
      x: '2019/01/01',
      y: 400,
      fillColor: '#f00'
   }, {
      x: '2019/04/01',
      y: 430,
      fillColor: '#f00'
   }, {
      x: '2019/07/01',
      y: 448,
      fillColor: '#f00'
   }, {
      x: '2019/10/01',
      y: 470,
      fillColor: '#f00'
   }, {
      x: '2020/01/01',
      y: 540,
      fillColor: '#0fa'
   }, {
      x: '2020/04/01',
      y: 580,
      fillColor: '#0fa'
   }, {
      x: '2020/07/01',
      y: 690,
      fillColor: '#0fa'
   }, {
      x: '2020/10/01',
      y: 690,
      fillColor: '#0fa'
   }]

    Of course, that can be performed automatically, by mapping a function to the
    data array, e.g.,

       data: [{
      x: '2019/01/01',
      y: 400
   }, {
      x: '2019/04/01',
      y: 430
   }, {
      x: '2019/07/01',
      y: 448
   }, {
      x: '2019/10/01',
      y: 470
   }, {
      x: '2020/01/01',
      y: 540
   }, {
      x: '2020/04/01',
      y: 580
   }, {
      x: '2020/07/01',
      y: 690
   }, {
      x: '2020/10/01',
      y: 690
   }].map(
      ({x, y}) => ({x, y, fillColor: x.match(/^2019/) ? '#f00' : '#0af'})
   )

    Full snippet:

    dayjs.extend(dayjs_plugin_quarterOfYear)
var options = {
   series: [{
      name: "sales",
      data: [{
         x: '2019/01/01',
         y: 400
      }, {
         x: '2019/04/01',
         y: 430
      }, {
         x: '2019/07/01',
         y: 448
      }, {
         x: '2019/10/01',
         y: 470
      }, {
         x: '2020/01/01',
         y: 540
      }, {
         x: '2020/04/01',
         y: 580
      }, {
         x: '2020/07/01',
         y: 690
      }, {
         x: '2020/10/01',
         y: 690
      }].map(({x, y})=> ({x, y, fillColor: x.match(/^2019/) ? '#f00' : '#0af'}))
   }],
   chart: {
      type: 'bar',
      height: 380
   },
   xaxis: {
      type: 'category',
      labels: {
         formatter: function(val) {
            return "Q" + dayjs(val).quarter()
         }
      },
      group: {
         style: {
            fontSize: '10px',
            fontWeight: 700
         },
         groups: [
            { title: '2019', cols: 4 },
            { title: '2020', cols: 4 }
         ]
      }
   },
   title: {
      text: 'Grouped Labels on the X-axis',
   },
   tooltip: {
      x: {
         formatter: function(val) {
            return "Q" + dayjs(val).quarter() + " " + dayjs(val).format("YYYY")
         }
      }
   }
};

const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
    <div id="chart"></div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.37.1/apexcharts.min.js"
        integrity="sha512-hl0UXLK2ElpaU9SHbuVNsvFv2BaYszlhxB2EntUy5FTGdfg9wFJrJG2JDcT4iyKmWeuDLmK+Nr2hLoq2sKk6MQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.10/dayjs.min.js"
      integrity="sha512-FwNWaxyfy2XlEINoSnZh1JQ5TRRtGow0D6XcmAWmYCRgvqOUTnzCxPc9uF35u5ZEpirk1uhlPVA19tflhvnW1g=="
      crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.10/plugin/quarterOfYear.min.js"
      integrity="sha512-pWtHtIgIdv64mVaEbh1ACEvfsrMvdSuJ7xGLzm3s1LiSPyA2pGit3cjTBHvFQCkXoX2r9drLdcfAP7C8eGbBTQ=="
      crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search