apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.27k stars 1.3k forks source link

How to set different colors to different labels or different label backgrounds based on label values ? #4581

Closed GantaVenkataKousik closed 2 months ago

GantaVenkataKousik commented 2 months ago

dataLabels: { enabled: true, style: { fontSize: '12px', fontFamily: "'Gantari', sans-serif", }, background: { enabled: true, formatter: function (value) { if (value > parseFloat(biomarkerInfo.highRange)) return 'hsl(0 100% 60%)' if (value < parseFloat(biomarkerInfo.lowRange)) return 'hsl(40 100% 62%)' }, }, dropShadow: { enabled: true, }, },

    this was not working

    This was setting the same color

            dataLabels: {
      enabled: true,
      style: {
        fontSize: '12px',
        fontFamily: "'Gantari', sans-serif",
        formatter: function (value) {
          if (value > parseFloat(biomarkerInfo.highRange))
            return 'hsl(0 100% 60%)'
          if (value < parseFloat(biomarkerInfo.lowRange))
            return 'hsl(40 100% 62%)'
        },
      },
      background: {
        enabled: true,
        foreColor: 'red'
      },
      dropShadow: {
        enabled: true,
      },
    },
brianlagunas commented 2 months ago

Closing as this is not a feature request, but rather it appears to be a question. Questions should be asked in discussions.

GantaVenkataKousik commented 2 months ago

Okay sure , thanks