Set active property on Bar chart on load

Question

I have a Bar chart. I'm using

react-chartjs-2 ("^4.2.0",)
Chart.js ("^3.8.0",)

My graph shows time periods and I want to highlight the latest time period once the component is loaded. Highlighting is done by setting the active property. It works onClick, however I want one of the bars to be highlighted even before user clicks anything (on component load)

My question is, how to complete such a scenario with react-chartjs-2 ? I saw that there is something called chart.setActiveElements but I can't find it in the objects I have access to. How to use that property in react ? Also, If there is a different way to achieve that, please let me know ;)

score 1 · Answer 1 · answered Oct 14 '22 at 11:44

1

You can use a ref for this:

export function App() {
  const chartRef = useRef<Chart>(null);

  useEffect(() => {
    const chart = chartRef.current;

    // More logic
  }, []);

  return <ReactChart ref={chartRef} type='bar' data={data} />;
}

answered Oct 14 '22 at 11:44

LeeLenalee

27,463
6
45
69

score 0 · Accepted Answer · answered Oct 20 '22 at 13:58

If anybody gets to the same issue in the future, I'm posting the solution.

LeeLenalee's response is also correct. I will just add more details here.

Create the ref

const chartRef = useRef<Chart<'bar'>>()

Use useEffect() hook and get the setActiveElements method from the ref

useEffect(() => {
    const numberOfElements = chartRef.current?.data.datasets[0].data.length
    if (numberOfElements) {
      chartRef.current?.setActiveElements([
        { datasetIndex: 0, index: numberOfElements - 1 }, // the last element
      ])
    }
  }, [])

Set active property on Bar chart on load

2 Answers2

Linked