Apex Chart - Reverse Bar Chart so 0 is the highest value

Question

I'm trying to build a table like below using apex charts, I want the lowest value in the data array to be the peak of the chart.

I've tried adding the reversed:true configuration to yaxis but that just flips the axis round and doesn't start each bar from the highest number.

Anyone know if I'm missing some configuration or if this is possible?

Answer 1

Not the most elegant solution, but this could work by changing the fill color and backgroundBarColors property

var options = {
  series: [
    {
      name: "Servings",
      data: [44, 55, 41, 67, 22, 43, 21, 33, 45, 31, 87, 65, 35]
    }
  ],
  chart: {
    height: 350,
    type: "bar",
    animations: {
      enabled: false
    },
    zoom: {
      enabled: false
    }
  },
  plotOptions: {
    bar: {
      columnWidth: "50%",
      colors: {
        backgroundBarColors: [
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333"
        ],
      }
    }
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    width: 0
  },
  fill: {
    colors: ["#fff"]
  },
  grid: {
    show: false
  },
  xaxis: {
    categories: [
      "Apples",
      "Oranges",
      "Strawberries",
      "Pineapples",
      "Mangoes",
      "Bananas",
      "Blackberries",
      "Pears",
      "Watermelons",
      "Cherries",
      "Pomegranates",
      "Tangerines",
      "Papayas"
    ]
  },
  tooltip: {
    intersect: false,
    shared: true
  },
  yaxis: {
    reversed: true,
  }
};