diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx index 36723fd6..2bf62894 100644 --- a/src/components/chart-elements/AreaChart/AreaChart.tsx +++ b/src/components/chart-elements/AreaChart/AreaChart.tsx @@ -189,6 +189,12 @@ const AreaChart = React.forwardRef((props, ref) "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} interval={startEndOnly ? "preserveStartEnd" : intervalType} tickLine={false} @@ -225,6 +231,12 @@ const AreaChart = React.forwardRef((props, ref) "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickFormatter={valueFormatter} allowDecimals={allowDecimals} diff --git a/src/components/chart-elements/BarChart/BarChart.tsx b/src/components/chart-elements/BarChart/BarChart.tsx index 6b5bf4df..997346bd 100644 --- a/src/components/chart-elements/BarChart/BarChart.tsx +++ b/src/components/chart-elements/BarChart/BarChart.tsx @@ -203,6 +203,12 @@ const BarChart = React.forwardRef((props, ref) => "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickLine={false} axisLine={showAxisLine} @@ -236,6 +242,12 @@ const BarChart = React.forwardRef((props, ref) => "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickLine={false} axisLine={showAxisLine} @@ -275,6 +287,12 @@ const BarChart = React.forwardRef((props, ref) => "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickFormatter={ relative ? (value: number) => `${(value * 100).toString()} %` : valueFormatter @@ -313,6 +331,12 @@ const BarChart = React.forwardRef((props, ref) => "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} > {yAxisLabel && ( diff --git a/src/components/chart-elements/LineChart/LineChart.tsx b/src/components/chart-elements/LineChart/LineChart.tsx index e155cc3a..4513f6af 100644 --- a/src/components/chart-elements/LineChart/LineChart.tsx +++ b/src/components/chart-elements/LineChart/LineChart.tsx @@ -186,6 +186,12 @@ const LineChart = React.forwardRef((props, ref) "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickLine={false} axisLine={showAxisLine} @@ -221,6 +227,12 @@ const LineChart = React.forwardRef((props, ref) "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickFormatter={valueFormatter} allowDecimals={allowDecimals} diff --git a/src/components/chart-elements/ScatterChart/ScatterChart.tsx b/src/components/chart-elements/ScatterChart/ScatterChart.tsx index 6e7eb02b..5388e4e0 100644 --- a/src/components/chart-elements/ScatterChart/ScatterChart.tsx +++ b/src/components/chart-elements/ScatterChart/ScatterChart.tsx @@ -248,6 +248,12 @@ const ScatterChart = React.forwardRef((props, "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} tickLine={false} tickFormatter={valueFormatter.x} @@ -291,6 +297,12 @@ const ScatterChart = React.forwardRef((props, "fill-tremor-content", // dark "dark:fill-dark-tremor-content", + // common + "stroke-1", + // light + "stroke-tremor-border", + // dark + "dark:stroke-dark-tremor-border", )} allowDecimals={allowDecimals} allowDataOverflow={true} diff --git a/src/stories/chart-elements/AreaChart.stories.tsx b/src/stories/chart-elements/AreaChart.stories.tsx index db57ce06..9a7f0957 100644 --- a/src/stories/chart-elements/AreaChart.stories.tsx +++ b/src/stories/chart-elements/AreaChart.stories.tsx @@ -364,3 +364,9 @@ export const AxisLabels: Story = { yAxisLabel: "Amount (USD)", }, }; + +export const ShowAxisLine: Story = { + args: { + showAxisLine: true, + }, +}; diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx index 664925dc..1f559c43 100644 --- a/src/stories/chart-elements/BarChart.stories.tsx +++ b/src/stories/chart-elements/BarChart.stories.tsx @@ -387,3 +387,9 @@ export const AxisLabels: Story = { yAxisLabel: "Amount (USD)", }, }; + +export const ShowAxisLine: Story = { + args: { + showAxisLine: true, + }, +}; diff --git a/src/stories/chart-elements/LineChart.stories.tsx b/src/stories/chart-elements/LineChart.stories.tsx index 11cea258..111b933b 100644 --- a/src/stories/chart-elements/LineChart.stories.tsx +++ b/src/stories/chart-elements/LineChart.stories.tsx @@ -324,3 +324,9 @@ export const AxisLabels: Story = { yAxisLabel: "Amount (USD)", }, }; + +export const ShowAxisLine: Story = { + args: { + showAxisLine: true, + }, +}; diff --git a/src/stories/chart-elements/ScatterChart.stories.tsx b/src/stories/chart-elements/ScatterChart.stories.tsx index d12402b0..b14fbc54 100644 --- a/src/stories/chart-elements/ScatterChart.stories.tsx +++ b/src/stories/chart-elements/ScatterChart.stories.tsx @@ -197,3 +197,9 @@ export const AxisLabels: Story = { yAxisLabel: "Amount (USD)", }, }; + +export const ShowAxisLine: Story = { + args: { + showAxisLine: true, + }, +};