Triggering Tooltip for a Chart element without hover

[Martí]

Hello!

I am working with two separate components. The first component displays data in a Kendo Grid, and the second component displays the same data in a Kendo Chart.

I have implemented a function that saves the index of the row when it is clicked (currentDatasetRow). The goal is to display the tooltip for that index in the chart whenever the index changes, and also to deactivate the tooltip when clicking the same row again.

I have tried a few things using the chartInstance from the ref, but I am a bit lost in how to get it to work correctly. I would really appreciate any guidance on how to implement this.

This is my component: 

import {
  Chart,
  ChartCategoryAxis,
  ChartCategoryAxisItem,
  ChartLegend,
  ChartSeries,
  ChartSeriesItem
} from '@progress/kendo-react-charts'
import 'hammerjs'
import React, { useEffect, useRef, useState } from 'react'
import { format } from 'date-fns'
import { useSelector } from 'react-redux'
function ChartComponent ({ dataProps }) {
  const currentDatasetRow = useSelector(state => state.monitorMenu.currentDatasetRow)
  const chartRef = useRef(null)
  const [tooltipIndex, setTooltipIndex] = useState(null)

  useEffect(() => {
    setTooltipIndex(currentDatasetRow)
  }, [currentDatasetRow])

  const lineTooltipRender = (props) => {
    const value = props.point.value
    const formattedValue = value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 4 })
    const formattedDate = format(new Date(props.point.category), 'yyyy-MM-dd HH:mm:ss')

    return (
      <div>
        Date: {formattedDate}
        <br />
        Value: {formattedValue}
      </div>
    )
  }

  return (
    <div style={{ height: '50vh', width: '100%', position: 'relative' }}>
      {(dataProps && dataProps.length > 0)
        ? (
        <Chart
          ref={chartRef}
          style={{ height: '100%', width: '100%' }}
          pannable={true}
          zoomable={true}
          transitions={false}
          className='custom-chart'
        >
          <ChartLegend position="top" />
          <ChartCategoryAxis>
            <ChartCategoryAxisItem maxDivisions={10} visible={false} axisCrossingValue={-1000} />
            <ChartCategoryAxisItem maxDivisions={10} />
          </ChartCategoryAxis>
          <ChartSeries>
             {dataProps.map((item, index) => {
               const parameter = item[0].parameter

               return (
                <ChartSeriesItem
                  key={index}
                  type="line"
                  data={item}
                  field="value"
                  categoryField="category"
                  name={parameter}
                  style="smooth"
                  width={parameter.includes('Anom.') ? 0 : 2}
                  tooltip={{ visible: true, render: lineTooltipRender }}
                  visible={true}
                />
               )
             })}
          </ChartSeries>
        </Chart>
          )
        : (
        <div style={{ height: '50vh', width: '100%' }}></div>
          )}
    </div>
  )
}

const MemoizedChartComponent = React.memo(ChartComponent)
export default MemoizedChartComponent

 

[Yanko]

Hello, Martí,

You are in the right direction. You can use `chartInstance` to programmatically display the ChartTooltip. I prepared a basic example that displays how you can use a button to trigger a specific ChartTooltip. You can extend your code by providing a similar logic to the onSelect method of the Grid row. You can use `showTooltip` and `hideTooltip` to control the state of the ChartTooltip:

• https://stackblitz.com/edit/react-wfbte2vo?file=app%2Fapp.tsx 

Please let me know if I can further assist you.

Regards,
Yanko
Progress Telerik