Search code examples
highchartslabelx-axis

remove xAxis label of vertical crosshair in highchart highstock

i have a highstock chart with multiple series, each one has it's own tooltip(shared:false), after hovering mouse, a label appear on xAxis, how to get ride of it?

 {
       xAxis: {
           crosshair: false
        },
        tooltip: {
          useHTML: true,
          shadow: false,
          borderRadius: 0,
          borderColor: "transparent",
          backgroundColor: "transparent",
          borderWidth: 0,
        },
        plotOptions: {
          series: {
            turboThreshold: 0,
          },
          states: {
            hover: {
              enabled: false,
            },
          },
        },
        series: [      {
    type: "line",
    name: series[0].name,
    data: [...],
    color: series[0].color,
    tooltip: {
      pointFormatter() {
        return `<span>tooltip1:xxx</span>`;
      },
    },
  },
  {
    type: "line",
    data: [...],
    name: series[1].name,
    color: series[1].color,
    pointFormatter() {
        return `<span>tooltip1:xxx</span>`;
      },
  }],
      }

in here i put a sample of what i mean and a picture: js fiddle enter image description here

Solution

  • From Highcharts API:

    split: boolean Since 5.0.0

    Split the tooltip into one label per series, with the header close to the axis. This is recommended over shared tooltips for charts with multiple line series, generally making them easier to read. This option takes precedence over tooltip.shared.

    To get rid of the header set headerFormat to an empty string.

    tooltip: {
  headerFormat: ''
}

    Live demo: https://jsfiddle.net/BlackLabel/bc467dmo/

    API Reference: https://api.highcharts.com/highstock/tooltip.headerFormat