diff --git a/.changeset/muted-timeseries-axis-labels.md b/.changeset/muted-timeseries-axis-labels.md new file mode 100644 index 0000000000..bd4da63e29 --- /dev/null +++ b/.changeset/muted-timeseries-axis-labels.md @@ -0,0 +1,5 @@ +--- +"@cloudflare/kumo": patch +--- + +Use muted chart colors for timeseries axes and horizontal gridlines. diff --git a/packages/kumo/src/components/chart/TimeseriesChart.tsx b/packages/kumo/src/components/chart/TimeseriesChart.tsx index d70f9f9d8f..11461224e2 100644 --- a/packages/kumo/src/components/chart/TimeseriesChart.tsx +++ b/packages/kumo/src/components/chart/TimeseriesChart.tsx @@ -309,6 +309,8 @@ export const TimeseriesChart = forwardRef< const incompleteAfter = incomplete?.after; const markerColor = ChartPalette.text("primary", isDarkMode); + const axisTextColor = ChartPalette.text("primary", isDarkMode); + const gridLineColor = colorWithOpacity(axisTextColor, 0.2); const markerLabelBackgroundColor = isDarkMode ? "rgba(0, 0, 0, 0.5)" : "rgba(255, 255, 255, 0.5)"; @@ -450,33 +452,41 @@ export const TimeseriesChart = forwardRef< name: xAxisName, nameLocation: "middle" as const, nameGap: 30, + nameTextStyle: { color: axisTextColor }, type: "time" as const, splitLine: { show: false, }, axisLine: { show: false }, splitNumber: xAxisTickCount ?? DEFAULT_X_AXIS_TICK_COUNT, - ...(xAxisTickFormat && { - axisLabel: { + axisLabel: { + color: axisTextColor, + ...(xAxisTickFormat && { formatter: (value: number) => xAxisTickFormat(value), - }, - }), + }), + }, }, yAxis: { name: yAxisName, nameLocation: "middle" as const, nameGap: 40, + nameTextStyle: { color: axisTextColor }, type: "value" as const, axisTick: { show: true }, axisLabel: { margin: 15, + color: axisTextColor, ...(yAxisTickFormat && { formatter: (value: number) => yAxisTickFormat(value), }), }, splitLine: { show: true, - lineStyle: { type: "dashed" as const, width: 1 }, + lineStyle: { + type: "dashed" as const, + width: 1, + color: gridLineColor, + }, }, splitNumber: yAxisTickCount, ...(thresholdExtent && { @@ -513,6 +523,8 @@ export const TimeseriesChart = forwardRef< thresholds, markerColor, markerLabelBackgroundColor, + axisTextColor, + gridLineColor, ]); const events = useMemo>(() => {