如何自定义Highcharts图例复选框的样式与位置？

内置配置项调整 #

• legend.itemCheckboxStyle：这是Highcharts官方提供的专门用于定义图例复选框样式的配置，直接在配置对象中补充需要的样式属性即可：

  legend: {
    itemCheckboxStyle: {
      width: '18px',
      height: '18px',
      backgroundColor: '#ffffff',
      border: '1px solid #cccccc',
      borderRadius: '3px',
      position: 'relative',
      left: '4px', // 调整复选框水平偏移
      top: '2px'  // 调整复选框垂直偏移
    }
  }
  

  若部分样式被默认行内样式覆盖，可在属性值后添加!important强制生效。

CSS类覆盖默认样式 #

如果内置配置无法满足需求，直接针对Highcharts生成的复选框元素类名编写CSS：

• 基础复选框样式：

  .highcharts-legend-checkbox {
    width: 18px !important;
    height: 18px !important;
    background-color: #fff !important;
    border: 1px solid #999 !important;
    border-radius: 4px !important;
    top: 2px !important;
    left: 3px !important;
  }
  

• 选中状态样式：

  .highcharts-legend-checkbox:checked {
    background-color: #2196F3 !important;
    background-image: none !important; /* 移除默认勾选图标，可自定义背景图替换 */
  }
  

图例项布局调整 #

若要调整复选框与文字的间距、图例项之间的间距，可配合以下配置：

legend: {
  itemStyle: {
    paddingLeft: '10px' // 给图例文字左侧加 padding，拉开与复选框的距离
  },
  itemMarginTop: 6, // 调整图例项之间的垂直间距
  itemMarginBottom: 6
}

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