How can I enable the brush feature for line and area plots inside the Mix chart in Ant Design Charts?

40 Views Asked by At

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?

0

There are 0 best solutions below