diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartData.ts b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartData.ts index dbda736c00..6a0af528bb 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartData.ts +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartData.ts @@ -18,6 +18,15 @@ export const createChartData = ( borderColor: theme.palette.primary.light, backgroundColor: theme.palette.primary.light, data: createChartPoints(metrics, locationSettings, m => m.yes + m.no), + elements: { + point: { + radius: 6, + pointStyle: 'circle', + }, + line: { + borderDash: [8, 4], + }, + }, }; const yesSeries = { @@ -25,6 +34,12 @@ export const createChartData = ( borderColor: theme.palette.success.light, backgroundColor: theme.palette.success.light, data: createChartPoints(metrics, locationSettings, m => m.yes), + elements: { + point: { + radius: 6, + pointStyle: 'triangle', + }, + }, }; const noSeries = { @@ -32,6 +47,13 @@ export const createChartData = ( borderColor: theme.palette.error.light, backgroundColor: theme.palette.error.light, data: createChartPoints(metrics, locationSettings, m => m.no), + elements: { + point: { + radius: 6, + pointStyle: 'triangle', + pointRotation: 180, + }, + }, }; return { datasets: [yesSeries, noSeries, requestsSeries] }; diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts index 43549ff765..d5e786c884 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts @@ -77,14 +77,6 @@ export const createChartOptions = ( }, }, }, - elements: { - point: { - // If we only have one point, always show a dot (since there's no line). - // If we have multiple points, only show dots on hover (looks better). - radius: metrics.length === 1 ? 6 : 0, - hoverRadius: 6, - }, - }, }; };