Search code examples
vue.jsapexcharts

Vue ApexChart heatmap colors array applying only in a row or column

I'm trying to create a heatmap using vue-apexcharts. I'd like to use 3 colors like a heat color chart based on its values...

red for small, yellow for average, green for big

i've tryied use these option:

chartOptions: {
  chart: {
    type: "heatmap",
        },
  colors: ["#F8696B", "#FEE683", "#63BE7B"]
  // also tried with this setting, but only change colors from row to column
  plotOptions: {
    heatmap: {
      distributed: true,
    },
  },
}

but didn't worked as expected as you can see below: enter image description here

the expected result would be like: enter image description here

Solution

  • To achieve the result you're looking for with this library would be quite tedious.

    You would need to specify a color range inside the heatmap.colorScale.ranges array for each of the intermediate shades of the combination of green, yellow, and red that you would like to see in your heatmap.

    Example color range object in ranges array:

    {
  from: -30,
  to: 5,
  color: '#00A100',
  name: 'low',
}

    If you look at the examples on the website you'll see that there's no example where multiple colors are blended in intermediate steps in a heatmap across just one category/series. Where there are multiple colors they are applied separately to each series, so you have different shades of the same color horizontally, but vertically the colors just cycle through the provided or default colors:

    For a single series of data, there are either multiple shades of just one color or a discrete set of color ranges.

    You can either write out a large number of color ranges with the specific shades you'd like to see or maybe use specify a single color, like in this example on the official site:

    You'd probably want to set a red color so that you'll have shades between white and red.