remove xAxis label of vertical crosshair in highchart highstock

Question

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

score 0 · Accepted Answer · answered Aug 22 '22 at 11:10

0

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

answered Aug 22 '22 at 11:10

ppotaczek

36,341
2
14
24

thank you, by the way, is there any way to customize it like tooltip html? – shahrooz bazrafshan Aug 22 '22 at 11:52
Hi @kingofday, I am not sure what you mean, could you explain the problem more precisely? – ppotaczek Aug 22 '22 at 12:49
i mean can i customize xAxis label that we get rid off with some html like tooltip instead of removing it? the reason i want to remove it, was because of its styling – shahrooz bazrafshan Aug 22 '22 at 17:45
Thanks for the explanation. Yes, you can use `tooltip.formatter` for that, for example: https://jsfiddle.net/BlackLabel/s3w7rm0n/ – ppotaczek Aug 23 '22 at 09:48
now i get it, the point was the first one is for xAxis and others for series, god bless you – shahrooz bazrafshan Aug 23 '22 at 10:22

remove xAxis label of vertical crosshair in highchart highstock

1 Answers1