Intersected dots is not selectable/hoverable areaspline

[alex496]

Code: Select all

const LineChart: FC<IProps> =
    ({
       config,
       isDashboardGraphChart,
       disableLabelsPercentage,
       plotFillColor,
       plotNegativeFillColor,
       shouldHaveTooltipImage
}) => {
  const colors = ['#00739B', '#93E1FF', '#9AAEBB', '#374955', '#915980', '#FFA500', '#EC992A'];
  const xAxisCategoriesNumber = config.xaxis && config.xaxis.categories.map((date: Date) =>
    moment(date, 'DD/MM/YYYY HH:mm').toDate().getTime()
  );

  const getSeriesByPageType = (cfgIndex: number) => {
    const commonSeriesData = xAxisCategoriesNumber.map((item: number, indx: number) => [
      item,
      config.series[cfgIndex]?.data[indx]
    ])

    const dashboardSeriesData = config.series[cfgIndex].data.map((point: any, pointIndex: number) => ({
      ...point,
      x: Number(moment(config.xaxis.categories[pointIndex], 'DD/MM/YYYY HH:mm').format('x')),
    }))
    return isDashboardGraphChart ? dashboardSeriesData : commonSeriesData
  }

  const series = config.series?.map((elem: any, cfgIndex: number) => ({
    name: config.series[cfgIndex]?.name
        ? config.series[cfgIndex]?.name
        : cfgIndex === 0
            ? 'Reach'
            : 'Engagement',
    type: 'areaspline',
    color: colors[cfgIndex] || colors[0],
    lineWidth: 1.2,
    data: getSeriesByPageType(cfgIndex),
    visible: cfgIndex === 0
  }));

  const options = {
    chart: {
      zoomType: 'x',
      type: 'areaspline',
      height: 650,
    },
    time: {
      useUTC: false,
    },
    series,
    title: {
      text: '',
    },
    yAxis: {
      // min: config.yaxis.min,
      // max: config.yaxis.max,
      endOnTick: false,
      startOnTick: false,
      title: '',
      gridLineColor: '#C5C5C5',
      plotLines: [
        {
          color: '#374955',
          dashStyle: 'Dash',
          value: 0,
          zIndex: 10,
          width: 1,
        },
      ],
      labels: {
        // Left side labels
        formatter: function () {
          return `${Number(this.value)?.toFixed(1)} ${disableLabelsPercentage ? '' : '%'}`;
        },
      },
    },
    xAxis: {
      type: 'datetime',
      crosshair: true,
      minTickInterval: 28 * 24 * 3600 * 1000,
      labels: {
        // Date under the chart
        formatter: function () {
          return `${moment(this.value).format('MMM YYYY')}`;
        },
      },
    },
    plotOptions: {
      series: {
        lineWidth: 1.2,
        marker: {
          enabled: true,
          radius: 3,
          symbol: 'circle',
        },
        states: {
          inactive: {
            opacity: .75
          }
        },
        pointIntervalUnit: 'month',
      },
      areaspline: {
        fillColor: plotFillColor || '#d1e7dd',
        negativeFillColor: plotNegativeFillColor || '#f8d7da',
      },
    },
    tooltip: {
      useHTML: true,
      formatter:function () {
        const point = this.point;
        const index = this.point.index;
        const series = this.point.series;
        const date = moment(xAxisCategoriesNumber[index]);
        return !(this.point as any).disabled
            && `
              <div class="tooltip-dot">
                <div>${date.format( 'DD MMMM hh:mm')}, ${date.format('YYYY')}</div>
                <div>${series.name}: ${point.y}${disableLabelsPercentage ? '' : '%'}</div>
                <div class="${shouldHaveTooltipImage ? 'd-block' : 'd-none'} pt-2 tooltip-image">
                  <img src="${config.images ? config.images[index] : ''}">
                </div>
              </div>
            `
      },
    },
  } as Highcharts.Options;

  return <HighchartsReact highcharts={Highcharts} options={options} />;
};

When I hover the dots on column line it's not working(working only for first dot). I tried to use the scatter, but I can't fill background for the scatter the same as for areaspline. How to make all dots hoverable using areaspline ?

screenshot

Screenshot 2022-09-29 181629.png (40.94 KiB) Viewed 166 times

[michal.f]

Hello and welcome to our forum and thanks for contacting us with your question!

To be able to hover over points that are on the same x, you need to set the series.areaspline.findNearestPointBy property to 'xy'.

Demo: https://jsfiddle.net/BlackLabel/dmgv217k/
API: https://api.highcharts.com/highstock/se ... estPointBy

Let me know if you have any further questions!
Best regards!

[alex496]

Thanks a lot. It works!

[michal.f]

You're welcome! In case of any further questions, feel free to contact us again.

Best regards!