如何将AG Charts折线图系列标签从标记上方移至下方？

方法1：通过系列标签的偏移配置直接调整 #

AG Grid Charts折线图的标签虽无公开的position属性，但可通过offsetY参数控制标签相对于标记的垂直位置。默认标签位于标记上方（offsetY为正值），设置负的offsetY值即可将标签移至标记下方：

修改你代码中的series配置，为label添加offsetY：

series: [
  {
    type: 'line',
    xKey: 'date',
    yKey: 'petrol',
    stroke: '#01c185',
    label: {
      enabled: true,
      offsetY: -12 // 负数值实现向下偏移，可根据字体大小调整具体数值
    },
    marker: {
      stroke: '#01c185',
      fill: '#01c185',
    },
    tooltip,
  },
  // ... 其他系列配置
]

方法2：通过主题全局配置所有折线图标签 #

若需要所有折线系列的标签统一位置，可在主题的overrides中全局设置：

theme: {
  overrides: {
    line: {
      series: {
        highlightStyle: {
          series: {
            strokeWidth: 3,
            dimOpacity: 0.2,
          },
        },
        label: {
          offsetY: -12 // 全局生效的折线图标签偏移设置
        }
      },
    },
  },
},

方法3：自定义CSS调整（备选方案） #

若上述配置不生效，可尝试通过CSS定位标签元素。AG Grid折线图标签的DOM类为.ag-chart-series-line .ag-chart-label，通过修改transform或位置属性调整：

.ag-chart-series-line .ag-chart-label {
  transform: translateY(8px) !important;
  /* 也可使用top属性：top: 10px !important; */
}

注：使用!important是为了覆盖AG Grid的内联样式优先级，实际使用时可根据DOM结构优化选择器精准度。

内容的提问来源于stack exchange，提问作者eamohego