how to integrate the Material UI slider with chart js

Question

how to integrate the Material UI slider with chart js, when I slide the Material UI slider, I want to move x-axis value in chart js highlighted with tooltip. I am using line chart

Answer 1

When the Slider changes, it calls the function provided to the onChange prop:

handleChange = (event, value) => {
  // do something
};

render() {
  return (
    <Slider onChange={this.handleChange} />
  )
}

In the handleChange event, you can update the chart data with the new value.

You'll need to be careful that the chart is outside the React DOM tree .

If instead you use a wrapper component for chart.js such as react-chart-2 , you can pass the data to the chart using props, or a state management library such as Redux, just like any other React component.