Highchart / Highstock stack column chart show one series's tooltip at a time

Question

Here is the code and image where i want tooltip one at a time with limited info:- If I am hovering over India West data it should show India West data only

Working code example with issue https://codesandbox.io/s/pie-chart-forked-oczpn?file=/src/index.js:0-1536

Note:- I am using stockchart here because i want the navigator below my chart.

import React from "react";
import { render } from "react-dom";
// I am using highstock instance
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import "./style.css";

// row data
const data = [
  {
    name: "India West",
    data: [
      [1620117360000, 398],
      [1620117420000, 399],
      [1620117480000, 399],
      [1620117540000, 400]
    ],
    legendIndex: 0
  },
  {
    name: "US Central",
    data: [
      [1620117360000, 263],
      [1620117420000, 264],
      [1620117480000, 264],
      [1620117540000, 264]
    ],
    legendIndex: 3
  },
  {
    name: "US East",
    data: [
      [1620117360000, 232],
      [1620117420000, 230],
      [1620117480000, 229],
      [1620117540000, 227]
    ],
    legendIndex: 4
  },
  {
    name: "US Northeast",
    data: [
      [1620117360000, 406],
      [1620117420000, 407],
      [1620117480000, 404],
      [1620117540000, 405],
    ],
    legendIndex: 2
  }
];

const navData = data.map((series) => ({
  data: series.data,
  stacking: "normal",
  name: series.name,
  type: "column"
}));

const options = {
  chart: {
    type: "column"
  },
  

  plotOptions: {
    column: {
      stacking: "normal",
    },
  },
  rangeSelector: {
    enabled: false
  },
  navigator: {
    enabled: true,
    height: 70,
    series: navData
  },
  series: data
};

const App = () => (
  <div>
    <HighchartsReact
      highcharts={Highcharts}
      constructorType={"stockChart"}
      options={options}
    />
  </div>
);

render(<App />, document.getElementById("root"));

Please help me how I can achieve the separate tooltip in case of multiple series with stack data.

score 2 · Accepted Answer · answered May 06 '21 at 18:32

I found the solution for this in my case I was using react. If we want each tooltip separate by defalut.

We don't need to pass the constructor type

const App = () => (
  <div>
    <HighchartsReact
      highcharts={Highcharts}
      ***constructorType={"stockChart"}*** // Just remove this line
      options={options}
    />
  </div>
);

Highchart / Highstock stack column chart show one series's tooltip at a time

1 Answers1