I have a Mix component with two plots: area and line, and I want to enable the brush option for my chart. In the Ant Design Charts documentation, I can see brush options only for column and scatter plots. Is there some option to achieve the brush feature in my case?
import { Mix } from '@ant-design/charts'
import { useMemo } from 'react'
export const ChartTest = (): JSX.Element => {
const data = useMemo(() => {
return [
{ value: 123, time: '12.05.2023', series: 'Series A' },
{ alarm: 1, time: '12.05.2023', series: 'Alarm series 1' },
{ alarm: 0, time: '12.05.2023', series: 'Alarm series 2' },
{ value: 54, time: '13.05.2023', series: 'Series A' },
{ alarm: 1, time: '13.05.2023', series: 'Alarm series 1' },
{ alarm: 1, time: '13.05.2023', series: 'Alarm series 2' }
]
}, [])
return (
<Mix
data={data}
tooltip={{ shared: true }}
legend={{}}
plots={[
{
type: 'area',
top: true,
options: {
xField: 'time',
yField: 'value',
seriesField: 'series',
isStack: false,
legend: { position: 'top' },
color: ['blue', 'red', 'orange'],
},
},
{
type: 'line',
top: true,
options: {
legend: { position: 'top' },
xField: 'time',
yField: 'alarm',
seriesField: 'series',
color: ['orange', 'red'],
yAxis: { position: 'right', grid: null },
xAxis: { grid: null, label: null },
},
},
]}
/>
)
}
For testing purposes, I added a new plot, but this time it is of the column type. For this kind of plot, it works exactly as I need.
{
type: 'column',
options: {
xField: 'time',
yField: 'value',
brush: { enabled: true, action: 'filter' },
},
},
Is there a way to add the brush feature to area and line plots inside the Mix chart?