Creating Interactive Filters for TanStack React Charts
Show how to add interactive filter controls (e.g., date range, categories) to dynamically query and update the displayed data in a chart.
import { useState } from 'react';
import { useChart } from 'tanstack-react-charts';
First, import useState from React for managing state and useChart from Tanstack React Charts for chart manipulation.
const [dateRange, setDateRange] = useState({ start: '', end: '' });
const [category, setCategory] = useState('');
Initialize state variables for the date range and category filters.
const handleDateChange = (start, end) => {
setDateRange({ start, end });
updateChartData();
};
Function to update the date range state and refresh the chart data based on the new date range.
const handleCategoryChange = (newCategory) => {
setCategory(newCategory);
updateChartData();
};
Function to update the category state and refresh the chart data based on the new category.
const updateChartData = () => {
// Fetch new data based on dateRange and category
// Use fetched data to update the chart
const filteredData = fetchData({ dateRange, category });
const chart = useChart();
chart.setData(filteredData);
};
Function to retrieve and update the chart data based on the current state of date range and category filters.
// Example usage inside component
// <input type='date' onChange={(e) => handleDateChange(e.target.value, dateRange.end)} />
// <input type='date' onChange={(e) => handleDateChange(dateRange.start, e.target.value)} />
// <select onChange={(e) => handleCategoryChange(e.target.value)}>
// <option value='Category1'>Category1</option>
// <option value='Category2'>Category2</option>
// </select>
Example HTML for the date range and category inputs. Use these inputs to capture user selections and trigger the corresponding state update functions.