diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/area-chart/test-single-point-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/area-chart/test-single-point-chrome-linux.png new file mode 100644 index 0000000000..400cb39c63 Binary files /dev/null and b/e2e/screenshots/all.test.ts-snapshots/baselines/area-chart/test-single-point-chrome-linux.png differ diff --git a/packages/charts/src/chart_types/xy_chart/renderer/canvas/areas.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/areas.ts index 3009e46092..ba1a352530 100644 --- a/packages/charts/src/chart_types/xy_chart/renderer/canvas/areas.ts +++ b/packages/charts/src/chart_types/xy_chart/renderer/canvas/areas.ts @@ -75,7 +75,8 @@ export function renderAreas( style.line.strokeWidth, minPointDistance, style.pointVisibilityMinDistance, - hasFit, + // has a connecting line only if is fit and there are more than one point on the chart + hasFit && points.length > 1, ), { area: getPanelClipping(panel, rotation), shouldClip: points[0]?.value.mark !== null }, ); diff --git a/packages/charts/src/chart_types/xy_chart/renderer/canvas/lines.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/lines.ts index c97e9ff135..c997f102d0 100644 --- a/packages/charts/src/chart_types/xy_chart/renderer/canvas/lines.ts +++ b/packages/charts/src/chart_types/xy_chart/renderer/canvas/lines.ts @@ -60,7 +60,8 @@ export function renderLines( line.style.line.strokeWidth, line.minPointDistance, line.style.pointVisibilityMinDistance, - line.hasFit, + // has a connecting line only if is fit and there are more than one point on the chart + line.hasFit && line.points.length > 1, ), // TODO: add padding over clipping { area: clippings, shouldClip: line.points[0]?.value.mark !== null }, diff --git a/storybook/stories/area/22_single_point_test.story.tsx b/storybook/stories/area/22_single_point_test.story.tsx new file mode 100644 index 0000000000..5667237a59 --- /dev/null +++ b/storybook/stories/area/22_single_point_test.story.tsx @@ -0,0 +1,97 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; + +import { + AreaSeries, + Axis, + Chart, + Position, + ScaleType, + Settings, + timeFormatter, + LegendValue, + LineSeries, +} from '@elastic/charts'; +import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana'; + +import { ChartsStory } from '../../types'; +import { useBaseTheme } from '../../use_base_theme'; + +const dateFormatter = timeFormatter('HH:mm'); +const dataLow = KIBANA_METRICS.metrics.kibana_os_load.v1.data; + +export const Example: ChartsStory = (_, { title, description }) => ( + + + + Number(d).toFixed(2)} + /> + + + + + + +); diff --git a/storybook/stories/area/area.stories.tsx b/storybook/stories/area/area.stories.tsx index 50646bcbc8..b1bb03722a 100644 --- a/storybook/stories/area/area.stories.tsx +++ b/storybook/stories/area/area.stories.tsx @@ -32,3 +32,4 @@ export { Example as steppedArea } from './20_stepped_area.story'; export { Example as testLinear } from './11_test_linear.story'; export { Example as testTime } from './12_test_time.story'; export { Example as testStackedWithMissingValues } from './16_test_stacked_with_missing.story'; +export { Example as testSinglePoint } from './22_single_point_test.story';