React Gantt Chart Example
Creates a React Gantt Chart using SciChart.js, using the new FastRectangleSeries to draw horizontal bars, with rounded corners and data labels coming from metadata
drawExample.ts
index.tsx
theme.ts
1import {
2 ZoomPanModifier,
3 ZoomExtentsModifier,
4 SciChartSurface,
5 ENumericFormat,
6 EAxisAlignment,
7 FastRectangleRenderableSeries,
8 XyxyDataSeries,
9 EColumnYMode,
10 EColumnMode,
11 EDataPointWidthMode,
12 NumberRange,
13 EHorizontalTextPosition,
14 EVerticalTextPosition,
15 SeriesInfo,
16 EXyDirection,
17 DateTimeNumericAxis,
18 CategoryAxis,
19 ELabelAlignment,
20 CursorModifier,
21 TCursorTooltipDataTemplate,
22} from "scichart";
23import { appTheme } from "../../../theme";
24
25const PROJECT_STAGES = [
26 "Project Planning",
27 "Requirements",
28 "System Design",
29 "Database Design",
30 "Front-end dev",
31 "Back-end dev",
32 "Integration",
33 "Unit Testing",
34 "System Testing",
35 "Deployment",
36];
37
38const PROJECT_TASKS = [
39 {
40 name: PROJECT_STAGES[0],
41 startDate: new Date(2025, 0, 1),
42 endDate: new Date(2025, 0, 15),
43 percentComplete: 100,
44 },
45 {
46 name: PROJECT_STAGES[1],
47 startDate: new Date(2025, 0, 10),
48 endDate: new Date(2025, 0, 25),
49 percentComplete: 100,
50 },
51 {
52 name: PROJECT_STAGES[2],
53 startDate: new Date(2025, 0, 20),
54 endDate: new Date(2025, 1, 15),
55 percentComplete: 90,
56 },
57 {
58 name: PROJECT_STAGES[3],
59 startDate: new Date(2025, 1, 5),
60 endDate: new Date(2025, 1, 20),
61 percentComplete: 85,
62 },
63 {
64 name: PROJECT_STAGES[4],
65 startDate: new Date(2025, 1, 15),
66 endDate: new Date(2025, 2, 25),
67 percentComplete: 70,
68 },
69 {
70 name: PROJECT_STAGES[5],
71 startDate: new Date(2025, 1, 15),
72 endDate: new Date(2025, 3, 5),
73 percentComplete: 60,
74 },
75 {
76 name: PROJECT_STAGES[6],
77 startDate: new Date(2025, 2, 25),
78 endDate: new Date(2025, 3, 15),
79 percentComplete: 30,
80 },
81 {
82 name: PROJECT_STAGES[7],
83 startDate: new Date(2025, 3, 1),
84 endDate: new Date(2025, 3, 20),
85 percentComplete: 20,
86 },
87 {
88 name: PROJECT_STAGES[8],
89 startDate: new Date(2025, 3, 15),
90 endDate: new Date(2025, 4, 5),
91 percentComplete: 0,
92 },
93 {
94 name: PROJECT_STAGES[9],
95 startDate: new Date(2025, 4, 1),
96 endDate: new Date(2025, 4, 15),
97 percentComplete: 0,
98 },
99];
100
101function prepareGanttData() {
102 // Prepare data for rect series
103 const xValues: number[] = []; // Start dates
104 const yValues: number[] = []; // Task positions (rows)
105 const x1Values: number[] = []; // End dates
106 const y1Values: number[] = []; // Task heights
107
108 // Task metadata for coloring and labels
109 const metaData: { name: string; percentComplete: number; isSelected: boolean; startDate: Date; endDate: Date }[] =
110 [];
111
112 // Convert Date objects to timestamps for rendering
113 PROJECT_TASKS.forEach((task, index) => {
114 const rowPosition = PROJECT_TASKS.length - index - 1; // Reverse order for display
115 const rowHeight = 0.8; // Height of each task bar
116
117 xValues.push(task.startDate.getTime() / 1000);
118 yValues.push(rowPosition);
119 x1Values.push(task.endDate.getTime() / 1000);
120 y1Values.push(rowPosition + rowHeight);
121
122 metaData.push({
123 name: task.name,
124 percentComplete: task.percentComplete,
125 isSelected: false,
126 startDate: task.startDate,
127 endDate: task.endDate,
128 });
129 });
130
131 return { xValues, yValues, x1Values, y1Values, metaData, taskCount: PROJECT_TASKS.length };
132}
133
134export const drawExample = async (rootElement: string | HTMLDivElement) => {
135 // Create a SciChartSurface
136 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
137 theme: appTheme.SciChartJsTheme,
138 });
139
140 const yAxis = new CategoryAxis(wasmContext, {
141 axisAlignment: EAxisAlignment.Left,
142 drawMajorBands: false,
143 drawLabels: true,
144 drawMinorGridLines: false,
145 drawMajorGridLines: false,
146 drawMinorTickLines: false,
147 drawMajorTickLines: false,
148 keepLabelsWithinAxis: false,
149 autoTicks: false,
150 majorDelta: 1,
151 growBy: new NumberRange(0.02, 0.02),
152 labels: PROJECT_STAGES.reverse(),
153 labelStyle: {
154 fontSize: 14,
155 fontWeight: "bold",
156 color: appTheme.MutedOrange,
157 alignment: ELabelAlignment.Right,
158 padding: { top: 0, right: 0, bottom: 40, left: 0 },
159 },
160 });
161
162 const xAxis = new DateTimeNumericAxis(wasmContext, {
163 axisAlignment: EAxisAlignment.Bottom,
164 drawMinorGridLines: false,
165 growBy: new NumberRange(0.02, 0.02),
166 // axisTitleStyle: {
167 // fontSize: 14,
168 // fontFamily: "Arial",
169 // color: appTheme.MutedOrange,
170 // // fontStyle: "italic",
171 // },
172 labelFormat: ENumericFormat.Date_DDMM,
173 });
174
175 sciChartSurface.xAxes.add(xAxis);
176 sciChartSurface.yAxes.add(yAxis);
177
178 sciChartSurface.yAxes.get(0).axisRenderer.hideOverlappingLabels = false;
179
180 const { xValues, yValues, x1Values, y1Values, metaData, taskCount } = prepareGanttData();
181
182 const rectangleGanttSeries = new FastRectangleRenderableSeries(wasmContext, {
183 dataSeries: new XyxyDataSeries(wasmContext, {
184 xValues,
185 yValues,
186 y1Values,
187 x1Values,
188 dataSeriesName: "Project Tasks",
189 metadata: metaData,
190 }),
191 columnXMode: EColumnMode.StartEnd,
192 columnYMode: EColumnYMode.TopBottom,
193 dataPointWidthMode: EDataPointWidthMode.Range,
194 stroke: appTheme.MutedRed,
195 strokeThickness: 2,
196 fill: appTheme.MutedBlue,
197 dataPointWidth: 0.9,
198 topCornerRadius: 4,
199 opacity: 0.5,
200 bottomCornerRadius: 4,
201 dataLabels: {
202 color: appTheme.ForegroundColor,
203 style: {
204 fontSize: 14,
205 },
206 numericFormat: ENumericFormat.Engineering,
207 verticalTextPosition: EVerticalTextPosition.Center,
208 horizontalTextPosition: EHorizontalTextPosition.Center,
209 metaDataSelector: (md) => {
210 const metadata = md as { name: string; percentComplete: number; isSelected: boolean };
211 return `${metadata.percentComplete.toString()} %`;
212 },
213 },
214 });
215
216 sciChartSurface.renderableSeries.add(rectangleGanttSeries);
217
218 const tooltipDataTemplate: TCursorTooltipDataTemplate = (seriesInfos: SeriesInfo[]) => {
219 const valuesWithLabels: string[] = [];
220
221 seriesInfos.forEach((si) => {
222 const xySI = si;
223 if (xySI.isWithinDataBounds) {
224 if (!isNaN(xySI.yValue) && xySI.isHit) {
225 valuesWithLabels.push(
226 `Start: ${new Date(
227 (xySI.pointMetadata as { startDate: number }).startDate
228 ).toLocaleDateString()}, End: ${new Date(
229 (xySI.pointMetadata as { endDate: number }).endDate
230 ).toLocaleDateString()}`
231 );
232 }
233 }
234 });
235 return valuesWithLabels;
236 };
237
238 // Add interactivity modifiers
239 sciChartSurface.chartModifiers.add(
240 new ZoomPanModifier({
241 enableZoom: true,
242 xyDirection: EXyDirection.XDirection, // Only zoom horizontally
243 }),
244 new ZoomExtentsModifier(),
245 new CursorModifier({
246 showTooltip: true,
247 tooltipDataTemplate,
248 showXLine: false,
249 showYLine: false,
250 tooltipContainerBackground: appTheme.MutedRed + 55,
251 })
252 );
253
254 return {
255 sciChartSurface,
256 wasmContext,
257 };
258};
259React Gantt Chart Example
Overview
This React implementation showcases a Gantt Chart using SciChart.js through the SciChartReact component. It visualizes project timelines with task completion percentages in a performant WebGL-rendered chart.
Technical Implementation
The chart is initialized via the initChart prop which creates a SciChartSurface with configured axes and series. Task data is processed into XyxyDataSeries format for the FastRectangleRenderableSeries. The implementation uses React's component lifecycle for efficient resource management.
Features and Capabilities
The component features interactive zooming (constrained to horizontal direction), task completion labels, and custom tooltips. The CursorModifier displays detailed task information on hover, while the reversed CategoryAxis ensures natural task ordering.
Integration and Best Practices
The example demonstrates proper React integration by encapsulating chart logic in a separate module. Developers can easily extend this by connecting to state management or adding dynamic updates while benefiting from SciChart's optimized rendering.
react Chart Examples & Demos
See Also: Charts added in v4 (16 Demos)
React Histogram Chart
Create a React Histogram Chart with custom texture fills and patterns. Try the SciChartReact wrapper component for seamless React integration today.
React Choropleth Map Example
Create a React Choropleth map, a type of thematic map where areas are shaded or patterned in proportion to the value of a variable being represented.
React Multi-Layer Map Example
Create a React Multi-Layer Map Example, using FastTriangleRenderableSeries with GeoJSON data-points using a constrained delaunay triangulation algorithm.
React Animated Bar Chart Example
Bring annual comparison data to life with the React Animated Bar Chart example from SciChart. This demo showcases top 10 tennis players from 1990 to 2024.
React Vector Field Plot
View the React Vector Field Plot example from SciChart, including dynamic vector generation, gradient-colored segments, and interactive zoom/pan. Try demo.
React Waterfall Chart | Bridge Chart
Build a React Waterfall Chart with dynamic coloring, multi-line data labels and responsive design, using the SciChartReact component for seamless integration.
React Box Plot Chart
Try the React Box Plot Chart example for React-friendly chart lifecycle management, dynamic sub-surface positioning, and custom styling. Try the demo now.
React Triangle Series | Triangle Mesh Chart
Create React Triangle Meshes with the Triangle Series from SciChart. This demo supports strip mode, list mode and the drawing of polygons. View the example.
React Treemap Chart
Create a React Treemap Chart to define rectangle positions based on total value. Use SciChart FastRectangleRenderableSeries and d3-hierarchy.js layouts.
React Map Chart with Heatmap overlay
Design a highly dynamic React Map Chart with Heatmap overlay with SciChart's feature-rich JavaScript Chart Library. Get your free demo today.
Realtime Audio Analyzer Bars Demo
Demonstrating the capability of SciChart.js to create a JavaScript Audio Analyzer Bars and visualize the Fourier-Transform of an audio waveform in realtime.
React Linear Gauges Example
View the React Linear Gauge Chart example to combine rectangles & annotations. Create a linear gauge dashboard with animated indicators and custom scales.
React Order of Rendering Example
The React Order of Rendering example gives you full control of the draw order of series and annotations for charts. Try SciChart's advanced customizations.
React Responsive HTML Annotations Example
Build Responsive React HTML Annotations with SciChart. Use the advanced CSS container queries for responsive text layout and custom design. View demo now.
HTML Annotations and Custom in-chart Controls Example
React HTML Chart Control example demonstrates advanced HTML annotation integration and how to render HTML components within charts. Try the SciChart demo.
React Polar Modifiers | Polar Interactivity Modifiers Demo
Explore SciChart's Polar Interactivity Modifiers including zooming, panning, and cursor tracking. Try the demo to trial the Polar Chart Behavior Modifiers.