{"id":20520,"date":"2022-06-23T08:00:47","date_gmt":"2022-06-23T02:30:47","guid":{"rendered":"https:\/\/www.fusioncharts.com\/blog\/?p=20520"},"modified":"2026-01-20T14:40:51","modified_gmt":"2026-01-20T09:10:51","slug":"how-to-create-a-javascript-gantt-chart","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/","title":{"rendered":"How to Create a JavaScript Gantt Chart: 2026 Project"},"content":{"rendered":"<span data-preserver-spaces=\"true\">Data visualization uses graphic elements, such as charts and graphs, to convey compelling stories. Furthermore, if your website contains a lot of data, you&#8217;ll need to find out how to make that info easy to interpret. Charts may help non-English speakers understand even the most complex data linkages by making them clear and intuitive. As a result, programmers and developers must understand how to create several different charts. A <\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.fusioncharts.com\/\" target=\"_blank\" rel=\"noopener\"><span data-preserver-spaces=\"true\">JavaScript Gantt chart<\/span><\/a><span data-preserver-spaces=\"true\">\u00a0shows dependency relations between activities and schedules. This makes it a precious tool in the software world today.<\/span>\r\n\r\n<span data-preserver-spaces=\"true\">Everyone understands basic charts fairly easily. However, technical jargon-filled texts are not as easily comprehended. Charts will make your website easier to understand and more visually appealing when utilized appropriately. Naturally, this tutorial will look at JavaScript Gantt charts and how to make them. So let&#8217;s get started.<\/span>\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#What_Is_A_Gantt_Chart\" title=\"What Is A Gantt Chart?\">What Is A Gantt Chart?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#What_Are_The_Features_Of_A_Gantt_Chart\" title=\"What Are The Features Of A Gantt Chart?\">What Are The Features Of A Gantt Chart?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#How_Can_You_Create_A_Simple_Gantt_Chart_In_JavaScript\" title=\"How Can You Create A Simple Gantt Chart In JavaScript?\u00a0\">How Can You Create A Simple Gantt Chart In JavaScript?\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#Why_Should_You_Choose_FusionCharts_To_Make_Gantt_Charts_In_JavaScript\" title=\"Why Should You Choose FusionCharts To Make Gantt Charts In JavaScript?\">Why Should You Choose FusionCharts To Make Gantt Charts In JavaScript?<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_Is_A_Gantt_Chart\"><\/span><span style=\"font-weight: 400\">What Is A Gantt Chart?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-20522 size-full\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2022\/06\/What-is-a-Gantt-Chart.jpg\" alt=\"What is a JavaScript Gantt Chart\" width=\"1280\" height=\"853\" srcset=\"\/blog\/wp-content\/uploads\/2022\/06\/What-is-a-Gantt-Chart.jpg 1280w, \/blog\/wp-content\/uploads\/2022\/06\/What-is-a-Gantt-Chart-300x200.jpg 300w, \/blog\/wp-content\/uploads\/2022\/06\/What-is-a-Gantt-Chart-1024x682.jpg 1024w, \/blog\/wp-content\/uploads\/2022\/06\/What-is-a-Gantt-Chart-768x512.jpg 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/>\r\n\r\n<span style=\"font-weight: 400\">There are numerous charts available &#8211; including <\/span><a href=\"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-flow-chart-in-javascript\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">flow charts<\/span><\/a><span style=\"font-weight: 400\">, pie charts, and Gantt charts &#8211; all having their benefits.<\/span>\r\n\r\n<span style=\"font-weight: 400\">JavaScript Gantt charts provide project management and planning by displaying <em>tasks<\/em> on the y-axis and <em>time<\/em> <em>scales<\/em> on the x-axis. The lengths of the task bars define the new task duration between the start and end dates. Tooltips display the exact time elapsed and support HTML and CSS formatting. Gantt chart data may simply be loaded from JSON or your database, and numerous high-performance open-source samples are available.<\/span>\r\n<h3><span class=\"ez-toc-section\" id=\"What_Are_The_Features_Of_A_Gantt_Chart\"><\/span><span style=\"font-weight: 400\">What Are The Features Of A Gantt Chart?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<span style=\"font-weight: 400\">JavaScript Gantt charts come with a variety of benefits. Gantt charts allow you to display both time and date. Moreover, using data with multiple and irregular divisions of dates on a timeline, you can customize the labels. In addition, you can also customize the cosmetic properties of each category.<\/span>\r\n\r\n<span style=\"font-weight: 400\">Furthermore, you can customize the input and output data formats with Gantt charts. This allows you to provide dates in a JSON file in some format and customize the output format in another. Moreover, you can also display the completion of each task in percentages, which you can define with the slackFillColor attribute.<\/span>\r\n<h4>Data Table<\/h4>\r\n<span style=\"font-weight: 400\">Gantt charts also allow you to show a data table at the side of the chart, which can be highly customized to your liking. Additionally, you can restrict the Gantt view pane area to specific data and time duration. You can also link a task to a process by specifying an ID. Hence, you can define multiple tasks for each process. This can prove beneficial in cases where the Gantt chart indicates allotted work for all team members. With a Gantt chart, it becomes easy to visualize the multiple jobs allocated to each member.<\/span>\r\n\r\n<span style=\"font-weight: 400\">Moreover, you can hide\/show task labels, individual taskbar dates, task labels, and even show individual taskbars as groups. Additionally, you can even customize connectors to connect any two tasks on the Gantt chart. The connectors can be rendered in four different ways and connected to either start, end, or both.<\/span>\r\n<h4>Milestones<\/h4>\r\n<span style=\"font-weight: 400\">Furthermore, you can display milestones as polygons or stars with customizable properties at specified dates. You can also display additional tool text for milestones. Moreover, trend lines or zones can be added to Gantt charts to highlight a particular date or a range of dates. You can, for example, add a trend line to represent &#8220;Today,&#8221; or one to illustrate &#8220;Holiday,&#8221; and so on. In addition, you can even customize tooltip properties to show task dates or as part of a tooltip. You can even add additional macros to create dynamic tooltips.<\/span>\r\n<h4>Legends<\/h4>\r\n<span style=\"font-weight: 400\">Finally, Gantt charts allow you to add a legend to the chart to display color keys and fully customize legend cosmetics. Furthermore, you can customize the chart&#8217;s colors using pre-defined palettes and single color theme selectors. You can specify the width ratio for distributing the data table and Gantt area. Gantt charts also allow you to display round-edged task bars and customize the gradient mix and shadow effect for taskbars. You can easily add annotations to the Gantt chart to display additional information. You can also enable hovering and customize hovering properties for categories, processes, connectors, and taskbars.<\/span>\r\n<h2><span class=\"ez-toc-section\" id=\"How_Can_You_Create_A_Simple_Gantt_Chart_In_JavaScript\"><\/span><span style=\"font-weight: 400\">How Can You Create A Simple Gantt Chart In JavaScript?\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-20523 size-full\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2022\/06\/How-Can-You-Create-a-Simple-Gantt-Chart-in-JavaScript.jpg\" alt=\"How Can You Create a Simple JavaScript Gantt Chart\" width=\"1280\" height=\"854\" srcset=\"\/blog\/wp-content\/uploads\/2022\/06\/How-Can-You-Create-a-Simple-Gantt-Chart-in-JavaScript.jpg 1280w, \/blog\/wp-content\/uploads\/2022\/06\/How-Can-You-Create-a-Simple-Gantt-Chart-in-JavaScript-300x200.jpg 300w, \/blog\/wp-content\/uploads\/2022\/06\/How-Can-You-Create-a-Simple-Gantt-Chart-in-JavaScript-1024x683.jpg 1024w, \/blog\/wp-content\/uploads\/2022\/06\/How-Can-You-Create-a-Simple-Gantt-Chart-in-JavaScript-768x512.jpg 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/>\r\n\r\n<span style=\"font-weight: 400\">Here is what you\u2019ll need to create a Gantt chart:<\/span>\r\n<ol>\r\n \t<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">First, define the data you want to use.<\/span><\/li>\r\n \t<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Second, specify the visual timeline for the JavaScript Gantt chart.<\/span><\/li>\r\n \t<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Next, define the processes.<\/span><\/li>\r\n \t<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Finally, define the tasks.<\/span><\/li>\r\n<\/ol>\r\n<span style=\"font-weight: 400\">FusionCharts Suite XT is the most comprehensive JavaScript charting solution available. It&#8217;s all about making the data visualization process easier with charts. FusionCharts components can be installed via CDN, local files, or NPM.<\/span>\r\n\r\n<span style=\"font-weight: 400\">If you choose to install the FusionCharts package via npm, ensure your system has Node.js installed. Moreover, ensure you have a bundler installed, such as webpack, parcel, or browserify.<\/span>\r\n\r\n<span style=\"font-weight: 400\">However, it is important to note that FusionCharts accepts data in JSON format.<\/span>\r\n\r\n<span style=\"font-weight: 400\">Now let\u2019s see how we can use JavaScript and FusionCharts to create Gantt charts.<\/span>\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>\r\n<pre><span style=\"font-weight: 400\">FusionCharts.ready(<\/span><b>function<\/b><span style=\"font-weight: 400\">() {<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 var socialMediaPlan = new FusionCharts({<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 type: <\/span><span style=\"font-weight: 400\">'gantt'<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 renderAt: <\/span><span style=\"font-weight: 400\">'chart-container'<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 width: <\/span><span style=\"font-weight: 400\">'750'<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 height: <\/span><span style=\"font-weight: 400\">'500'<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 dataFormat: <\/span><span style=\"font-weight: 400\">'json'<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 dataSource: {<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"chart\"<\/span><span style=\"font-weight: 400\">: {<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"dateformat\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"mm\/dd\/yyyy\"<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"caption\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"Social Media Optimization\"<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"subcaption\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"Typical Steps Involved\"<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"theme\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"fusion\"<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"canvasBorderAlpha\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"40\"<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 },<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"categories\"<\/span><span style=\"font-weight: 400\">: [{<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"category\"<\/span><span style=\"font-weight: 400\">: [{<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"start\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"08\/01\/2014\"<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"end\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"08\/31\/2014\"<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"label\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"Aug '14\"<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"start\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"09\/01\/2014\"<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"end\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"09\/30\/2014\"<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"label\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"Sep '14\"<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 ]<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 }],<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"processes\"<\/span><span style=\"font-weight: 400\">: {<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"fontsize\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"12\"<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"isbold\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"1\"<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"align\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"right\"<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"process\"<\/span><span style=\"font-weight: 400\">: [{<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"label\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"Identify Customers\"<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"label\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"Survey 500 Customers\"<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"label\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"Interpret Requirements\"<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"label\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"Market Analysis\"<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"label\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"Brainstorm concepts\"<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 ]<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 },<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"tasks\"<\/span><span style=\"font-weight: 400\">: {<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"task\"<\/span><span style=\"font-weight: 400\">: [{<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"start\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"08\/04\/2014\"<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"end\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"08\/10\/2014\"<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"start\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"08\/08\/2014\"<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"end\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"08\/19\/2014\"<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"start\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"08\/19\/2014\"<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"end\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"09\/02\/2014\"<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"start\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"08\/24\/2014\"<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"end\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"09\/02\/2014\"<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"start\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"09\/02\/2014\"<\/span><span style=\"font-weight: 400\">,<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><span style=\"font-weight: 400\">\"end\"<\/span><span style=\"font-weight: 400\">: <\/span><span style=\"font-weight: 400\">\"09\/21\/2014\"<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 ]<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 }<\/span>\r\n\r\n<span style=\"font-weight: 400\">\u00a0 \u00a0 }<\/span>\r\n<span style=\"font-weight: 400\">\u00a0 }).render();<\/span>\r\n<span style=\"font-weight: 400\">});<\/span>\r\n<\/pre>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<span style=\"font-weight: 400\">You can run a more extensive version of this code on <\/span><span style=\"font-weight: 400\">fiddle<\/span><span style=\"font-weight: 400\">.\u00a0<\/span>\r\n<h2><span class=\"ez-toc-section\" id=\"Why_Should_You_Choose_FusionCharts_To_Make_Gantt_Charts_In_JavaScript\"><\/span><span style=\"font-weight: 400\">Why Should You Choose FusionCharts To Make Gantt Charts In JavaScript?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<span data-preserver-spaces=\"true\">FusionCharts makes it simple to create JavaScript graphs. Undoubtedly, it is a complete JavaScript framework for interactive and responsive charts. FusionCharts requires only a few lines of code to integrate into your online application. The FusionCharts platform provides several graph examples, including source code, and is regularly updated and bug-free. For example, click here to learn how to make pie charts in <\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-pie-chart-in-php-and-mysql\/\" target=\"_blank\" rel=\"noopener\"><span data-preserver-spaces=\"true\">PHP, MySQL<\/span><\/a><span data-preserver-spaces=\"true\">, and\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/www.fusioncharts.com\/blog\/how-to-create-pie-chart-in-react\/\" target=\"_blank\" rel=\"noopener\"><span data-preserver-spaces=\"true\">React<\/span><\/a><span data-preserver-spaces=\"true\">.<\/span>\r\n\r\n<span style=\"font-weight: 400\">Individual assistance is also available to help you quickly resolve technical issues and information about various charts and dashboards to help you understand all the capabilities. FusionCharts also includes several graphs to help you visualize your data effectively.<\/span>\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/download\/fusioncharts-suite-xt?framework=js\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">Now you know what makes FusionCharts the best JavaScript framework. So, click here and start creating Gantt charts in JS and much more!<\/span><\/a>","protected":false},"excerpt":{"rendered":"<p>Data visualization uses graphic elements, such as charts and graphs, to convey compelling stories. Furthermore, if your website contains a lot of data, you&#8217;ll need to find out how to make that info easy to interpret. Charts may help non-English speakers understand even the most complex data linkages by making them clear and intuitive. As [&hellip;]<\/p>\n","protected":false},"author":55,"featured_media":20521,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[722],"tags":[152,163,211,1099],"coauthors":[737],"class_list":["post-20520","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fusioncharts","tag-fusioncharts","tag-gantt-chart","tag-javascript","tag-javascript-gantt-chart"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create a JavaScript Gantt Chart: 2026 Project<\/title>\n<meta name=\"description\" content=\"Learn how to create a JavaScript Gantt chart to show dependency relations and schedules. Master project management visualization for the great year 2026.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a JavaScript Gantt Chart: 2026 Project\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a JavaScript Gantt chart to show dependency relations and schedules. Master project management visualization for the great year 2026.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-23T02:30:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:10:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2022\/06\/How-To-Create-A-JavaScript-Gantt-Chart.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"854\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Emad Bin Abid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Emad Bin Abid\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Emad Bin Abid\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/1eddd6ac5f4437245b996d06590e1fce\"\n\t            },\n\t            \"headline\": \"How to Create a JavaScript Gantt Chart: 2026 Project\",\n\t            \"datePublished\": \"2022-06-23T02:30:47+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:10:51+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/\"\n\t            },\n\t            \"wordCount\": 979,\n\t            \"commentCount\": 0,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2022\/06\/How-To-Create-A-JavaScript-Gantt-Chart.jpg\",\n\t            \"keywords\": [\n\t                \"FusionCharts\",\n\t                \"gantt chart\",\n\t                \"javascript\",\n\t                \"JavaScript Gantt Chart\"\n\t            ],\n\t            \"articleSection\": [\n\t                \"FusionCharts\"\n\t            ],\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"CommentAction\",\n\t                    \"name\": \"Comment\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/\",\n\t            \"name\": \"How to Create a JavaScript Gantt Chart: 2026 Project\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2022\/06\/How-To-Create-A-JavaScript-Gantt-Chart.jpg\",\n\t            \"datePublished\": \"2022-06-23T02:30:47+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:10:51+00:00\",\n\t            \"description\": \"Learn how to create a JavaScript Gantt chart to show dependency relations and schedules. Master project management visualization for the great year 2026.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2022\/06\/How-To-Create-A-JavaScript-Gantt-Chart.jpg\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2022\/06\/How-To-Create-A-JavaScript-Gantt-Chart.jpg\",\n\t            \"width\": 1280,\n\t            \"height\": 854,\n\t            \"caption\": \"How To Create A JavaScript Gantt Chart\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.fusioncharts.com\/blog\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"How to Create a JavaScript Gantt Chart: 2026 Project\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"name\": \"FusionBrew - The FusionCharts Blog\",\n\t            \"description\": \"Get tips and tricks on how to build effective Data Visualisation using FusionCharts\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\",\n\t            \"name\": \"FusionCharts\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"width\": 1,\n\t                \"height\": 1,\n\t                \"caption\": \"FusionCharts\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/1eddd6ac5f4437245b996d06590e1fce\",\n\t            \"name\": \"Emad Bin Abid\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/d0bac2c2fe471b4c6f7b4d3bcd39364d\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/88f\/88f17af503508a48a3ccc99ad09d3fb2x96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/88f\/88f17af503508a48a3ccc99ad09d3fb2x96.jpg\",\n\t                \"caption\": \"Emad Bin Abid\"\n\t            },\n\t            \"description\": \"I'm a software engineer who has a bright vision and a strong interest in designing and engineering software solutions. I readily understand that in today's agile world the development process has to be rapid, reusable, and scalable; hence it is extremely important to develop solutions that are well-designed and embody a well-thought-of architecture as the baseline. Apart from designing and developing business solutions, I'm a content writer who loves to document technical learnings and experiences so that peers in the same industry can also benefit from them.\",\n\t            \"sameAs\": [\n\t                \"https:\/\/www.linkedin.com\/in\/emadbinabid\/\"\n\t            ],\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/emadbinabid\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a JavaScript Gantt Chart: 2026 Project","description":"Learn how to create a JavaScript Gantt chart to show dependency relations and schedules. Master project management visualization for the great year 2026.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a JavaScript Gantt Chart: 2026 Project","og_description":"Learn how to create a JavaScript Gantt chart to show dependency relations and schedules. Master project management visualization for the great year 2026.","og_url":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2022-06-23T02:30:47+00:00","article_modified_time":"2026-01-20T09:10:51+00:00","og_image":[{"width":1280,"height":854,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2022\/06\/How-To-Create-A-JavaScript-Gantt-Chart.jpg","type":"image\/jpeg"}],"author":"Emad Bin Abid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Emad Bin Abid","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/"},"author":{"name":"Emad Bin Abid","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/1eddd6ac5f4437245b996d06590e1fce"},"headline":"How to Create a JavaScript Gantt Chart: 2026 Project","datePublished":"2022-06-23T02:30:47+00:00","dateModified":"2026-01-20T09:10:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/"},"wordCount":979,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2022\/06\/How-To-Create-A-JavaScript-Gantt-Chart.jpg","keywords":["FusionCharts","gantt chart","javascript","JavaScript Gantt Chart"],"articleSection":["FusionCharts"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/","url":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/","name":"How to Create a JavaScript Gantt Chart: 2026 Project","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2022\/06\/How-To-Create-A-JavaScript-Gantt-Chart.jpg","datePublished":"2022-06-23T02:30:47+00:00","dateModified":"2026-01-20T09:10:51+00:00","description":"Learn how to create a JavaScript Gantt chart to show dependency relations and schedules. Master project management visualization for the great year 2026.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2022\/06\/How-To-Create-A-JavaScript-Gantt-Chart.jpg","contentUrl":"\/blog\/wp-content\/uploads\/2022\/06\/How-To-Create-A-JavaScript-Gantt-Chart.jpg","width":1280,"height":854,"caption":"How To Create A JavaScript Gantt Chart"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/how-to-create-a-javascript-gantt-chart\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a JavaScript Gantt Chart: 2026 Project"}]},{"@type":"WebSite","@id":"https:\/\/www.fusioncharts.com\/blog\/#website","url":"https:\/\/www.fusioncharts.com\/blog\/","name":"FusionBrew - The FusionCharts Blog","description":"Get tips and tricks on how to build effective Data Visualisation using FusionCharts","publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fusioncharts.com\/blog\/#organization","name":"FusionCharts","url":"https:\/\/www.fusioncharts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/","url":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","contentUrl":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","width":1,"height":1,"caption":"FusionCharts"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/1eddd6ac5f4437245b996d06590e1fce","name":"Emad Bin Abid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/d0bac2c2fe471b4c6f7b4d3bcd39364d","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/88f\/88f17af503508a48a3ccc99ad09d3fb2x96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/88f\/88f17af503508a48a3ccc99ad09d3fb2x96.jpg","caption":"Emad Bin Abid"},"description":"I'm a software engineer who has a bright vision and a strong interest in designing and engineering software solutions. I readily understand that in today's agile world the development process has to be rapid, reusable, and scalable; hence it is extremely important to develop solutions that are well-designed and embody a well-thought-of architecture as the baseline. Apart from designing and developing business solutions, I'm a content writer who loves to document technical learnings and experiences so that peers in the same industry can also benefit from them.","sameAs":["https:\/\/www.linkedin.com\/in\/emadbinabid\/"],"url":"https:\/\/www.fusioncharts.com\/blog\/author\/emadbinabid\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/20520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/users\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=20520"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/20520\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/20521"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=20520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=20520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=20520"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=20520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}