Angular Gantt Chart Example
Creates a Angular Gantt Chart using SciChart.js, using the new FastRectangleSeries to draw horizontal bars, with rounded corners and data labels coming from metadata
drawExample.ts
angular.ts
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};
259Angular Gantt Chart Example
Overview
This Angular example creates a Gantt Chart using the ScichartAngularComponent to visualize project timelines. The standalone component approach demonstrates clean integration with Angular's architecture.
Technical Implementation
The chart configuration is delegated to the drawExample function which sets up the SciChartSurface with DateTimeNumericAxis and customized CategoryAxis. The FastRectangleRenderableSeries displays tasks with completion percentage labels.
Features and Capabilities
The implementation includes horizontal zooming via ZoomPanModifier, task tooltips, and automatic axis ranging. The use of EColumnMode.StartEnd ensures accurate task duration representation.
Integration and Best Practices
The example follows Angular best practices by using standalone components and property binding. Developers can extend this by adding @Input properties for dynamic data or implementing Angular services for data management while maintaining high rendering performance.
angular Chart Examples & Demos
See Also: Charts added in v4 (16 Demos)
Angular Histogram Chart
Create an Angular Histogram Chart with custom texture fills and patterns. Try the SciChartAngular wrapper component for seamless Angular integration today.
Angular Choropleth Map Example
Create an Angular Choropleth map, a type of thematic map where areas are shaded or patterned in proportion to the value of a variable being represented.
Angular Multi-Layer Map Example
Create a Angular Multi-Layer Map Example, using FastTriangleRenderableSeries with GeoJSON data-points using a constrained delaunay triangulation algorithm.
Angular Animated Bar Chart Example
Bring annual comparison data to life with the Angular Animated Bar Chart example from SciChart. This demo showcases top 10 tennis players from 1990 to 2024.
Angular Vector Field Plot
View the Angular Vector Field Plot example from SciChart, including dynamic vector generation, gradient-colored segments, and interactive zoom/pan. Try demo.
Angular Waterfall Chart | Bridge Chart
Build an Angular Waterfall Chart with dynamic coloring, multi-line data labels & responsive design, using ScichartAngular component for seamless integration
Angular Box Plot Chart
Try the Angular Box Plot Chart example for Angular-friendly chart lifecycle management, dynamic sub-surface positioning, and custom styling. Try the demo now.
Angular Triangle Series | Triangle Mesh Chart
Create Angular Triangle Meshes with the Triangle Series from SciChart. This demo supports strip mode, list mode and the drawing of polygons. View the example.
Angular Treemap Chart
Create an Angular Treemap Chart to define rectangle positions based on total value. Use SciChart FastRectangleRenderableSeries and d3-hierarchy.js layouts.
Angular Map Chart with Heatmap overlay
Design a highly dynamic Angular 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.
Angular Linear Gauges Example
View the Angular Linear Gauge Chart example to combine rectangles & annotations. Create a linear gauge dashboard with animated indicators and custom scales.
Angular Order of Rendering Example
The Angular Order of Rendering example gives you full control of the draw order of series and annotations for charts. Try SciChart's advanced customizations.
Angular Responsive HTML Annotations Example
Build Responsive Angular 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
Angular HTML Chart Control example demonstrates advanced HTML annotation integration and how to render HTML components within charts. Try the SciChart demo.
Angular 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.