From 45a8f003931aa6ddffa1acc4330f515e3dbe2466 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Mon, 23 Dec 2024 11:53:46 +0600 Subject: [PATCH] fix: Line chart responsive issue --- src/components/line-chart/line-chart.tsx | 108 ++++++++++++----------- 1 file changed, 56 insertions(+), 52 deletions(-) diff --git a/src/components/line-chart/line-chart.tsx b/src/components/line-chart/line-chart.tsx index 170a27fb..9b714b59 100644 --- a/src/components/line-chart/line-chart.tsx +++ b/src/components/line-chart/line-chart.tsx @@ -5,6 +5,7 @@ import { YAxis, CartesianGrid, Tooltip, + ResponsiveContainer, } from 'recharts'; import ChartTooltipContent from './chart-tooltip-content'; import Label from '../label'; @@ -64,10 +65,10 @@ interface LineChartProps { yAxisFontColor?: string; /** Width of the chart container. */ - chartWidth?: number; + chartWidth?: number | string; /** Height of the chart container. */ - chartHeight?: number; + chartHeight?: number | string; /** Determines whether dots are shown on each data point. */ withDots?: boolean; @@ -124,56 +125,59 @@ const LineChart = ( { } return ( - - { showCartesianGrid && } - { showXAxis && ( - - ) } - { showYAxis && ( - - ) } - - { showTooltip && ( - - } - /> - ) } - - { dataKeys.map( ( key, index ) => ( - - ) ) } - + + + { showCartesianGrid && } + { showXAxis && ( + + ) } + { showYAxis && ( + + ) } + + { showTooltip && ( + + } + /> + ) } + + { dataKeys.map( ( key, index ) => ( + + ) ) } + + ); };