diff --git a/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useOptions.tsx b/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useOptions.tsx index 9f0ebecf9..0bee3f160 100644 --- a/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useOptions.tsx +++ b/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useOptions.tsx @@ -1,6 +1,6 @@ import { useMemo } from 'react'; import type { ChartProps } from '../../core'; -import type { ChartType as ChartJSChartType } from 'chart.js'; +import { ChartType as ChartJSChartType } from 'chart.js'; import type { BusterChartConfigProps, BusterChartProps, @@ -178,11 +178,11 @@ export const useOptions = ({ const options: ChartProps['options'] = useMemo(() => { const chartAnnotations = chartPlugins?.annotation?.annotations; + const isLargeDataset = datasetOptions[0].source.length > 125; + return { indexAxis: isHorizontalBar ? 'y' : 'x', - animation: animate ? { duration: 1000 } : { duration: 0 }, - responsive: true, - maintainAspectRatio: false, + animation: animate && !isLargeDataset ? { duration: 1000 } : { duration: 0 }, backgroundColor: colors, borderColor: colors, scales, @@ -195,7 +195,7 @@ export const useOptions = ({ annotations: { ...goalLinesAnnotations, ...chartAnnotations, ...trendlineAnnotations } }, decimation: { - enabled: datasetOptions[0].source.length > 500, + enabled: isLargeDataset, algorithm: 'min-max' } }, diff --git a/web/src/components/ui/charts/stories/BusterChart.ScatterChart.stories.tsx b/web/src/components/ui/charts/stories/BusterChart.ScatterChart.stories.tsx index 4f92012d0..0aae479fa 100644 --- a/web/src/components/ui/charts/stories/BusterChart.ScatterChart.stories.tsx +++ b/web/src/components/ui/charts/stories/BusterChart.ScatterChart.stories.tsx @@ -48,6 +48,14 @@ export const Default: Story = { style: 'string' } satisfies IColumnLabelFormat } satisfies Record, - className: 'w-[800px] h-[600px]' + className: 'w-[400px] h-[400px]' + } +}; + +export const LargeDataset: Story = { + args: { + ...Default.args, + data: generateScatterChartData(3000), + className: 'w-[400px] h-[400px]' } };