Как сделать кастомный tooltip в highchart?

Question

[Villas56]

Всем привет. Хочу сделать тултип как на картинке

Но сейчас такой
Но не могу найти инфу в доке. Как сделать как на первом скрине? Сейчас у меня такой api -

import colors from '../../utils/colorsCharts';

const ColumnChart = ({ rawData }) => ({
  chart: {
    type: 'column',
    spacingBottom: 5,
    spacingLeft: 0,
    spacingRight: 5,
    spacingTop: 10,
    height: 200,
  },
  title: false,
  subtitle: false,
  legend: false,
  credits: false,
  xAxis: {
    visible: false,
    categories: rawData.map(item => item[0]),
    gridLineColor: 'rgba(74,74,74,0.1)',
    gridLineWidth: 1,
    tickWidth: 0,
    endOnTick: false,
  },
  yAxis: {
    title: {
      text: null,
    },
    startOnTick: true,
    gridLineWidth: 1,
    gridLineColor: 'rgba(74,74,74,0.1)',
    lineWidth: 1,
    lineColor: '#e6e6e6',
    tickWidth: 0,
    showFirstLabel: true,
  },
  tooltip: {
    backgroundColor: '#fff',
    borderWidth: 0,
    borderRadius: 3,
    headerFormat: '<div style="display: flex; flex-direction: column; align-items: center;">',
    pointFormat: '<div>{point.y}</div>',
    footerFormat: '</div>',
    style: {
      color: '#4a4a4a',
    },
    padding: 4,
    shared: true,
    useHTML: true,
  },
  plotOptions: {
    column: {
      stacking: 'normal',
    },
    borderRadius: 3,
  },
  series: [{
    data: rawData.map(item => item[2]),
    color: colors[1],
  },
  {
    data: rawData.map(item => item[1]),
    color: colors[0],
  }],
});

export default ColumnChart;

А данные приходят так -
['11', 2500, 100],
Когда использую pointFormat: '{point.y}', появляется оба значения. А мне нужно модифицировать их по своему. {point.x} не работает. Можно ли взять каждое по значению и сделать с ними что мне нужно?

Answer 1

[Alex Karo]

Попробуй фунцию formatter, на выходе отдаешь нужный тебе html
https://api.highcharts.com/highcharts/tooltip.formatter