Skip to content

LG-5588 Add Bar series for charts #3206

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

LG-5588 Add Bar series for charts #3206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ca797ef
feat: add Bar series
nima-taheri-mongodb Oct 16, 2025
4ecc362
refactor: change makeLineData to makeSeriesData
nima-taheri-mongodb Oct 15, 2025
a0d29c5
docs: rename Basic to Line, then add a Bar to charts-core storybook
nima-taheri-mongodb Oct 15, 2025
61d1d95
feat: add changeset
nima-taheri-mongodb Oct 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/funny-eagles-think.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lg-charts/core': minor
---

Allow charts to use Bar series data in addition to Line series
115 changes: 76 additions & 39 deletions charts/core/src/Chart.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import type { StoryObj } from '@storybook/react';
import { ChartProps } from './Chart/Chart.types';
import { ChartHeaderProps } from './ChartHeader/ChartHeader.types';
import { ChartTooltipProps } from './ChartTooltip/ChartTooltip.types';
import { LineProps } from './Series';
import { makeLineData } from './testUtils';
import { Bar, LineProps } from './Series';
import { makeSeriesData } from './testUtils';
import { ThresholdLineProps } from './ThresholdLine';
import {
Chart,
Expand All @@ -26,11 +26,17 @@ import {
} from '.';

const numOfLineColors = 15;
const lineData = makeLineData(numOfLineColors);
const seriesData = makeSeriesData(numOfLineColors);
const lowDensitySeriesData = seriesData
.filter((_, i) => i < 3)
.map(series => ({
...series,
data: series.data.filter((d, i) => i % 4 === 0),
}));

// Dynamically calculate x-axis min/max from the generated data to avoid timezone issues
const allXValues =
lineData[0]?.data
seriesData[0]?.data
?.filter(([date]) => date != null)
.map(([date]) => new Date(date!).getTime()) ?? [];
const xAxisMin = Math.min(...allXValues);
Expand Down Expand Up @@ -121,7 +127,7 @@ export const LiveExample: StoryObj<{
thresholdLinePosition: ThresholdLineProps['position'];
}> = {
args: {
data: lineData,
data: seriesData,
state: 'unset',
horizontalGridLines: true,
verticalGridLines: true,
Expand Down Expand Up @@ -666,7 +672,7 @@ export const DarkMode: StoryObj<{}> = {
position={[new Date('2024-01-01T00:38:00').getTime(), 2015]}
level="warning"
/>
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand Down Expand Up @@ -718,7 +724,7 @@ export const LoadingState: StoryObj<{}> = {
position={[new Date('2024-01-01T00:38:00').getTime(), 2015]}
level="warning"
/>
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand Down Expand Up @@ -764,7 +770,7 @@ export const OverlayState: StoryObj<{}> = {
position={[new Date('2024-01-01T00:38:00').getTime(), 2015]}
level="warning"
/>
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand Down Expand Up @@ -810,7 +816,7 @@ export const DraggingState: StoryObj<{}> = {
position={[new Date('2024-01-01T00:38:00').getTime(), 2015]}
level="warning"
/>
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand Down Expand Up @@ -865,7 +871,7 @@ export const ResizingWithContainer: StoryObj<{ containerWidth: number }> = {
position={[new Date('2024-01-01T00:38:00').getTime(), 2015]}
level="warning"
/>
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -874,18 +880,49 @@ export const ResizingWithContainer: StoryObj<{ containerWidth: number }> = {
},
};

export const Basic: StoryObj<{}> = {
export const _Line: StoryObj<{}> = {
name: 'Line',
render: () => {
return (
<Chart>
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
);
},
};

export const _Bar: StoryObj<{}> = {
name: 'Bar',
render: () => {
return (
<Chart>
{lowDensitySeriesData.map(({ name, data }) => (
<Bar name={name} data={data} key={name} />
))}
</Chart>
);
},
};

export const BarStacked: StoryObj<{}> = {
render: () => {
return (
<Chart>
{lowDensitySeriesData.map(({ name, data }, index) => (
<Bar
name={name}
data={data}
key={name}
stack={index < 2 ? 'same' : undefined}
/>
))}
</Chart>
);
},
};

export const NullValues: StoryObj<{}> = {
render: () => {
return (
Expand All @@ -911,7 +948,7 @@ export const WithTooltip: StoryObj<{}> = {
return (
<Chart>
<ChartTooltip />
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -924,7 +961,7 @@ export const WithXAxis: StoryObj<{}> = {
return (
<Chart>
<XAxis type="time" />
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -937,7 +974,7 @@ export const WithXAxisWithLabel: StoryObj<{}> = {
return (
<Chart>
<XAxis type="time" label="X-Axis Label" />
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -950,7 +987,7 @@ export const WithYAxis: StoryObj<{}> = {
return (
<Chart>
<YAxis type="value" />
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -963,7 +1000,7 @@ export const WithYAxisWithLabel: StoryObj<{}> = {
return (
<Chart>
<YAxis type="value" label="Y-Axis Label" />
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -976,7 +1013,7 @@ export const WithGrid: StoryObj<{}> = {
return (
<Chart>
<ChartGrid />
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -989,7 +1026,7 @@ export const WithVerticalGrid: StoryObj<{}> = {
return (
<Chart>
<ChartGrid horizontal={false} />
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -1002,7 +1039,7 @@ export const WithHorizontalGrid: StoryObj<{}> = {
return (
<Chart>
<ChartGrid vertical={false} />
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -1015,7 +1052,7 @@ export const WithHeader: StoryObj<{}> = {
return (
<Chart>
<ChartHeader title="Header" />
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -1028,7 +1065,7 @@ export const WithHeaderAndDivider: StoryObj<{}> = {
return (
<Chart>
<ChartHeader title="Header" showDivider />
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand Down Expand Up @@ -1056,7 +1093,7 @@ export const WithHeaderContent: StoryObj<{}> = {
</div>
}
/>
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand Down Expand Up @@ -1127,7 +1164,7 @@ export const WithHeaderTitleIcon: StoryObj<{
</div>
}
/>
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -1140,7 +1177,7 @@ export const WithThresholdLine: StoryObj<{}> = {
return (
<Chart>
<ThresholdLine position={1300} label="Cluster Limit" value="1300" />
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -1158,7 +1195,7 @@ export const WithInfoEventMarkerPoint: StoryObj<{}> = {
position={[new Date('2024-01-01T00:38:00').getTime(), 2015]}
level="info"
/>
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -1176,7 +1213,7 @@ export const WithWarningEventMarkerPoint: StoryObj<{}> = {
position={[new Date('2024-01-01T00:38:00').getTime(), 2015]}
level="warning"
/>
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -1194,7 +1231,7 @@ export const WithInfoEventMarkerLine: StoryObj<{}> = {
message="Event marker line message"
level="info"
/>
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -1212,7 +1249,7 @@ export const WithWarningEventMarkerLine: StoryObj<{}> = {
message="Event marker line message"
level="warning"
/>
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -1229,7 +1266,7 @@ export const WithZoom: StoryObj<{}> = {
yAxis: true,
}}
>
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -1245,7 +1282,7 @@ export const WithXAxisZoom: StoryObj<{}> = {
xAxis: true,
}}
>
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -1261,7 +1298,7 @@ export const WithYAxisZoom: StoryObj<{}> = {
yAxis: true,
}}
>
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -1279,7 +1316,7 @@ export const WithZoomAndTooltip: StoryObj<{}> = {
}}
>
<ChartTooltip />
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -1305,19 +1342,19 @@ export const SyncedByGroupIDWithTooltipSync: StoryObj<{}> = {
>
<Chart groupId="group1" enableGroupTooltipSync>
<ChartTooltip />
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
<Chart groupId="group1" enableGroupTooltipSync>
<ChartTooltip />
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
<Chart groupId="group1" enableGroupTooltipSync>
<ChartTooltip />
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand All @@ -1344,19 +1381,19 @@ export const SyncedByGroupIDWithoutTooltipSync: StoryObj<{}> = {
>
<Chart groupId="group1" enableGroupTooltipSync={false}>
<ChartTooltip />
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
<Chart groupId="group1" enableGroupTooltipSync={false}>
<ChartTooltip />
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
<Chart groupId="group1" enableGroupTooltipSync={false}>
<ChartTooltip />
{lineData.map(({ name, data }) => (
{seriesData.map(({ name, data }) => (
<Line name={name} data={data} key={name} />
))}
</Chart>
Expand Down
1 change: 0 additions & 1 deletion charts/core/src/Echart/Echart.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ interface DisciplinedSeriesOption<EChartType extends SeriesOption> {
// all supported series options types disciplined and grouped into a single interface
export interface EChartSeriesOptions {
line: DisciplinedSeriesOption<LineSeriesOption>;
// TODO: to be leveraged in a follow-up PR to add Bar chart support
bar: DisciplinedSeriesOption<BarSeriesOption>;
}

Expand Down
1 change: 1 addition & 0 deletions charts/core/src/Echart/initializeEcharts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export async function initializeEcharts(): Promise<
// Registers any component we need to use. This is necessary to facilitate tree shaking.
echartsCore.use([
echartsCharts.LineChart,
echartsCharts.BarChart,
echartsRenders.CanvasRenderer,
echartsComponents.TitleComponent,
echartsComponents.TooltipComponent,
Expand Down
Loading
Loading