如何配置ApexCharts实现数值小于0时区域为红色、大于0时为绿色

我看了你的配置，其实你已经找对了方向——用plotOptions.area.colors.ranges来划分颜色区间，但配置里有几个小问题需要修正，就能完美实现“Y值小于0显示红色，大于0显示绿色”的效果。

修改后的完整配置 #

var options = {
 series: [{
  name: 'Profit',
  data: [{"x":"2021-08-29","y":0.23},{"x":"2021-08-30","y":-5.29},{"x":"2021-08-31","y":-0.02},{"x":"2021-09-01","y":5.38}]
 }],
 chart: {
  type: 'area',
  height: 350,
  zoom: { enabled: false },
  toolbar: { show: false }
 },
 stroke: {
  show: true,
  curve: 'smooth',
  lineCap: 'butt',
  width: 2
 },
 fill: {
  type: 'gradient',
  gradient: {
   shadeIntensity: 1,
   opacityFrom: 0.45,
   opacityTo: 0.9
  }
 },
 plotOptions: {
  area: {
   colors: {
    ranges: [
     { 
      from: -Infinity, 
      to: 0, 
      color: "#e85347" // 红色：Y值小于0的区域
     },
     { 
      from: 0, 
      to: Infinity, 
      color: "#1ee0ac" // 绿色：Y值大于0的区域
     }
    ]
   },
   columnWidth: "80%"
  }
 },
 yaxis: {
  labels: { offsetX: 0 },
  axisBorder: { show: false },
  axisTicks: { show: false }
 },
 xaxis: {
  type: 'datetime',
  tickAmount: 8,
  labels: {
   rotate: -45,
   rotateAlways: true,
   formatter: function(val, timestamp) {
    return moment(new Date(timestamp)).format("DD MMM")
   }
  }
 },
 tooltip: { shared: true },
 legend: { position: 'top', horizontalAlign: 'right', offsetX: -10 }
};
var chart = new ApexCharts(document.querySelector("#portfolio_line"), options);
chart.render();

关键修改点说明 #

• 修正语法错误：你原来的配置里，颜色值后面的注释没有正确闭合，导致JSON格式错误，我已经把注释移到单独行并修正了逗号位置。
• 扩展数值范围：把原来的from: -100改成from: -Infinity，to: 100改成to: Infinity，这样不管Y值是多大的负数或正数，都能被正确匹配到对应的颜色区间。
• 优化配置格式：调整了代码缩进和换行，让配置结构更清晰，避免语法歧义。

这样修改后，图表会自动根据每个数据点的Y值，把对应区域填充为红色（Y<0）或绿色（Y>0），完全符合你的需求。

内容的提问来源于stack exchange，提问作者Hai Truong IT