From 53f124202255158c3ac119077725a6bc97798ae2 Mon Sep 17 00:00:00 2001 From: anmol Date: Mon, 20 Jul 2026 13:37:21 +0530 Subject: [PATCH 1/4] fix(chart): mute timeseries axis labels --- .changeset/muted-timeseries-axis-labels.md | 5 +++++ .../kumo/src/components/chart/TimeseriesChart.tsx | 14 ++++++++++---- 2 files changed, 15 insertions(+), 4 deletions(-) create mode 100644 .changeset/muted-timeseries-axis-labels.md diff --git a/.changeset/muted-timeseries-axis-labels.md b/.changeset/muted-timeseries-axis-labels.md new file mode 100644 index 0000000000..f7c22909fa --- /dev/null +++ b/.changeset/muted-timeseries-axis-labels.md @@ -0,0 +1,5 @@ +--- +"@cloudflare/kumo": patch +--- + +Use muted chart text colors for timeseries axis labels and titles. diff --git a/packages/kumo/src/components/chart/TimeseriesChart.tsx b/packages/kumo/src/components/chart/TimeseriesChart.tsx index aa22436e57..f2d8470116 100644 --- a/packages/kumo/src/components/chart/TimeseriesChart.tsx +++ b/packages/kumo/src/components/chart/TimeseriesChart.tsx @@ -309,6 +309,7 @@ export const TimeseriesChart = forwardRef< const incompleteAfter = incomplete?.after; const markerColor = ChartPalette.text("primary", isDarkMode); + const axisTextColor = ChartPalette.text("primary", isDarkMode); const markerLabelBackgroundColor = isDarkMode ? "rgba(0, 0, 0, 0.5)" : "rgba(255, 255, 255, 0.5)"; @@ -450,26 +451,30 @@ 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), }), @@ -513,6 +518,7 @@ export const TimeseriesChart = forwardRef< thresholds, markerColor, markerLabelBackgroundColor, + axisTextColor, ]); const events = useMemo>(() => { From cd84671d999f8cc9eea80301a05c349e3baa2b8a Mon Sep 17 00:00:00 2001 From: anmol Date: Mon, 20 Jul 2026 13:38:09 +0530 Subject: [PATCH 2/4] fix(chart): mute timeseries brush selection --- .changeset/muted-timeseries-axis-labels.md | 2 +- packages/kumo/src/components/chart/TimeseriesChart.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.changeset/muted-timeseries-axis-labels.md b/.changeset/muted-timeseries-axis-labels.md index f7c22909fa..47e97c4ff3 100644 --- a/.changeset/muted-timeseries-axis-labels.md +++ b/.changeset/muted-timeseries-axis-labels.md @@ -2,4 +2,4 @@ "@cloudflare/kumo": patch --- -Use muted chart text colors for timeseries axis labels and titles. +Use muted chart colors for timeseries axes and brush selections. diff --git a/packages/kumo/src/components/chart/TimeseriesChart.tsx b/packages/kumo/src/components/chart/TimeseriesChart.tsx index f2d8470116..26adf393b7 100644 --- a/packages/kumo/src/components/chart/TimeseriesChart.tsx +++ b/packages/kumo/src/components/chart/TimeseriesChart.tsx @@ -435,8 +435,8 @@ export const TimeseriesChart = forwardRef< }, brushStyle: { borderWidth: 1, - color: "rgba(120,140,180,0.3)", - borderColor: "rgba(120,140,180,0.8)", + color: colorWithOpacity(axisTextColor, 0.2), + borderColor: colorWithOpacity(axisTextColor, 0.6), }, }, tooltip: { From 80468411656ceac0ec711f077c2246997033df22 Mon Sep 17 00:00:00 2001 From: anmol Date: Mon, 20 Jul 2026 13:42:08 +0530 Subject: [PATCH 3/4] revert(chart): keep timeseries brush colors --- .changeset/muted-timeseries-axis-labels.md | 2 +- packages/kumo/src/components/chart/TimeseriesChart.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.changeset/muted-timeseries-axis-labels.md b/.changeset/muted-timeseries-axis-labels.md index 47e97c4ff3..f7c22909fa 100644 --- a/.changeset/muted-timeseries-axis-labels.md +++ b/.changeset/muted-timeseries-axis-labels.md @@ -2,4 +2,4 @@ "@cloudflare/kumo": patch --- -Use muted chart colors for timeseries axes and brush selections. +Use muted chart text colors for timeseries axis labels and titles. diff --git a/packages/kumo/src/components/chart/TimeseriesChart.tsx b/packages/kumo/src/components/chart/TimeseriesChart.tsx index 26adf393b7..f2d8470116 100644 --- a/packages/kumo/src/components/chart/TimeseriesChart.tsx +++ b/packages/kumo/src/components/chart/TimeseriesChart.tsx @@ -435,8 +435,8 @@ export const TimeseriesChart = forwardRef< }, brushStyle: { borderWidth: 1, - color: colorWithOpacity(axisTextColor, 0.2), - borderColor: colorWithOpacity(axisTextColor, 0.6), + color: "rgba(120,140,180,0.3)", + borderColor: "rgba(120,140,180,0.8)", }, }, tooltip: { From ea2971ee7a85865f0e935be635c9a54bf34c391a Mon Sep 17 00:00:00 2001 From: anmol Date: Mon, 20 Jul 2026 13:43:01 +0530 Subject: [PATCH 4/4] fix(chart): mute timeseries gridlines --- .changeset/muted-timeseries-axis-labels.md | 2 +- packages/kumo/src/components/chart/TimeseriesChart.tsx | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/.changeset/muted-timeseries-axis-labels.md b/.changeset/muted-timeseries-axis-labels.md index f7c22909fa..bd4da63e29 100644 --- a/.changeset/muted-timeseries-axis-labels.md +++ b/.changeset/muted-timeseries-axis-labels.md @@ -2,4 +2,4 @@ "@cloudflare/kumo": patch --- -Use muted chart text colors for timeseries axis labels and titles. +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 f2d8470116..e1fc268888 100644 --- a/packages/kumo/src/components/chart/TimeseriesChart.tsx +++ b/packages/kumo/src/components/chart/TimeseriesChart.tsx @@ -310,6 +310,7 @@ export const TimeseriesChart = forwardRef< 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)"; @@ -481,7 +482,11 @@ export const TimeseriesChart = forwardRef< }, splitLine: { show: true, - lineStyle: { type: "dashed" as const, width: 1 }, + lineStyle: { + type: "dashed" as const, + width: 1, + color: gridLineColor, + }, }, splitNumber: yAxisTickCount, ...(thresholdExtent && { @@ -519,6 +524,7 @@ export const TimeseriesChart = forwardRef< markerColor, markerLabelBackgroundColor, axisTextColor, + gridLineColor, ]); const events = useMemo>(() => {