amChartv5 on Angular is successfully displaying a Gantt chart that includes multiple categories with the same name being resolved

I've been working on integrating an amCharts v5 gantt chart with Angular 13. Each bar in the chart represents a project, and if there are multiple occurrences of a category, they should stack like a timeline. I've successfully retrieved data from a local JSON file and added custom properties. However, I'm facing an issue where the chart creates multiple lines for each declaration, even when the categories match.

It's worth noting that the bars stack correctly, with all the inputs in sequence as intended. The problem lies in the chart creating three lines, two of which are empty, while only the third is populated by the data as expected.

Here is an example of the JSON structure:

[
    {
      "category": "LETICIA",
      "fromDate": "2022-08-02 00:00",
      "toDate": "2022-08-08 23:59",
      "columnSettings": {
        "fill": "#57315b"
      },
      "task": "Sprint #1",
      "personnel": 13
    },
    {
      "category": "LETICIA",
      "fromDate": "2022-08-08 00:00",
      "toDate": "2022-08-09 23:59",
      "columnSettings": {
        "fill": "#E6E6FA"
      },
      "task": "Presentation",
      "personnel": 14
    },
    {
      "category": "LETICIA",
      "fromDate": "2022-08-09 00:00",
      "toDate": "2022-08-19 23:59",
      "columnSettings": {
        "fill": "#57315b"
      },
      "task": "Sprint #1",
      "personnel": 15
    }
]

View the resulting chart here

I have attempted to manipulate the JSON data without much success. Is there a way to eliminate these unnecessary category duplications?

Unfortunately, I haven't been able to adapt it for StackBlitz yet, but you can view my current component and service setup here: Check out my code on StackBlitz

angulartypescriptamchartsgantt-chartstacked-chart

Answer №1

The issue in your code can be found on line 95: yAxis.data.setAll(data);

Instead of using the variable data, which contains repeated categories, you need to pass an array of object literals that specifically lists your categories like this:

yAxis.data.setAll([
  { category: "Category 1" },
  { category: "Category 2" },
  { category: "Category 3" }
]);

Here is a complete example:

am5.ready(() => {

  let root = am5.Root.new("chartdiv");

  let chart = root.container.children.push(am5xy.XYChart.new(root, {}));
  
  let data = [
    {
      "category": "LETICIA",
      "fromDate": "2022-08-02 00:00",
      "toDate": "2022-08-08 23:59",
      "columnSettings": {
        "fill": "#57315b"
      },
      "task": "Sprint #1",
      "personnel": 13
    },
    {
      "category": "LETICIA",
      "fromDate": "2022-08-08 00:00",
      "toDate": "2022-08-09 23:59",
      "columnSettings": {
        "fill": "#E6E6FA"
      },
      "task": "Presentation",
      "personnel": 14
    },
    {
      "category": "LETICIA",
      "fromDate": "2022-08-09 00:00",
      "toDate": "2022-08-19 23:59",
      "columnSettings": {
        "fill": "#57315b"
      },
      "task": "Sprint #1",
      "personnel": 15
    }
  ];

  let xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
    baseInterval: { timeUnit: "minute", count: 1 },
    renderer: am5xy.AxisRendererX.new(root, {})
  }));
  
  let yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
    categoryField: "category",
    renderer: am5xy.AxisRendererY.new(root, { inversed: true })
  }));

  // ==================================================
  yAxis.data.setAll([{ category: "LETICIA" }]); // <--- HERE
  // ==================================================

  let series = chart.series.push(am5xy.ColumnSeries.new(root, {
    xAxis: xAxis,
    yAxis: yAxis,
    openValueXField: "fromDate",
    valueXField: "toDate",
    categoryYField: "category"
  }));

  series.columns.template.setAll({
    templateField: "columnSettings",
    strokeOpacity: 0
  });

  series.data.processor = am5.DataProcessor.new(root, {
    dateFields: ["fromDate", "toDate"],
    dateFormat: "yyyy-MM-dd HH:mm"
  });
  
  series.data.setAll(data);

});
#chartdiv {
  width: 100%;
  height: 350px;
}
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>

<div id="chartdiv"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving data from an API using VUEJS3 and Typescript

I am facing an issue with displaying data in my template. When I try to do so, the screen remains blank. I am using Vue.js 3 with TypeScript and I am fairly new to this technology. <template> <div> <img :src="datas[0].imag ...

typescriptvue.jsvuejs3

What is the best way to dynamically assign formControlNames in Angular using *ngFor?

I am currently facing a challenge with setting form controls using *ngFor over objects in an Array. The number of objects in the array can vary, sometimes resulting in only 1 object while other times multiple objects are present. My specific issue revolve ...

angulartypescriptangular-material2ngfor

Working with Ngxs and WebSocket: How to intercept the connection and include a custom HTTP header

Currently, I am utilizing ngxs's NgxsWebsocketPluginModule to establish a websocket connection within my Angular application. In order to authenticate the connecting client, my server mandates an authentication token to be included in the HTTP headers ...

angularwebsocketngxs

Whenever signing in with Next Auth, the response consistently exhibits the values of "ok" being false and "status" being 302, even

I am currently using Next Auth with credentials to handle sign-ins. Below is the React sign-in function, which can be found at this link. signIn('credentials', { redirect: false, email: email, password: password, ...

typescriptauthenticationnext.jsnext-auth

ngx-translate is failing to display any text within a lazily-loaded module

We are currently utilizing Angular 6 within our application and have recently initiated the process of preparing our app for lazy-loading. Our application consists of multiple lazy-loaded routes, and our goal is to utilize a single language file for all ro ...

angularlazy-loadingangular6ngx-translate

Angular2 - Issue with calling toPromise() method on this.http.get() function, as it is not recognized

I was following a tutorial on angular.io called Tour the Heroes, but instead of sticking to the tutorial I decided to make a real GET request for some JSON data. Here is a snippet of my code: private userUrl = 'https://jsonplaceholder.typicode.com ...

angulartypescript

Tips for organizing MUI Card effectively within a React application using TypeScript

Struggling to build a React card component with Material-UI (MUI) and TypeScript that represents a car? The card should contain text, an image, checkboxes, a rating, and a button. Here's the code I've come up with so far: import React from ' ...

reactjstypescriptmaterial-ui

Creating a currency input field in HTML using a pattern textbox

In a project using HTML, Angular 2, and Typescript, I am working with a textbox. How can I ensure that it only accepts numbers along with either one dot or one comma? The input should allow for an infinite number of digits followed by a dot or a comma and ...

htmlangularjsdesign-patternstypescriptcurrency

Flashing Screens with Ionic 2

I am currently dealing with a situation where my login page and homepage are involved. I have implemented native storage to set an item that helps in checking if the user is already logged in (either through Facebook or Google authentication). The logic fo ...

angulartypescriptionic2ionic3

Utilizing Angular 2 Highcharts with Font Awesome to enhance custom button functionality

I came across this example demonstrating how to add font awesome icons to custom buttons in highcharts. http://jsfiddle.net/zfngxoow/6/ (function (H) { H.wrap(H.Renderer.prototype, 'label', function (proceed, str, x, y, shape, anchorX, ...

angularhighchartsangular2-highcharts

Using TypeORM to update a relation and set it to NULL

My challenge involves managing this specific Entity @Entity({ name: 'orders' }) export class Order { ... @ManyToOne(() => BulkOrder, (bulkOrder) => bulkOrder.orders) bulkOrder?: BulkOrder } In my update process, I am attempting to re ...

sqltypescripttypeorm

Is it more beneficial to convert all the current jQuery AJAX webparts into Typescript or should I opt to inject the existing jQuery into SPFX instead?

Transitioning from SharePoint 2013 to SharePoint online raises the question of how to migrate existing webparts that utilize jquery - ajax to SPFX client webparts. One possibility is rewriting all the code in Typescript, but is it possible to simply inje ...

typescriptsharepointsharepoint-onlinespfx

Exploring NextJS with Typescript to utilize the getStaticProps method

I'm currently enrolled in a NextJS course and I am interested in using Typescript. While browsing through a GitHub discussion forum, I came across an issue that I don't quite understand. The first function provided below seems to be throwing an e ...

javascripttypescriptfunctionnext.jsgetstaticprops

An issue occurred while trying to run Ionic serve: [ng] Oops! The Angular Compiler is in need of TypeScript version greater than or equal to 4.4.2 and less than 4.5.0, but it seems that version 4

Issue with running the ionic serve command [ng] Error: The Angular Compiler requires TypeScript >=4.4.2 and <4.5.0 but 4.5.2 was found instead. Attempted to downgrade typescript using: npm install typescript@">=4.4.2 <4.5.0" --save-dev --save- ...

angulartypescriptionic-frameworknpm

Automate the compilation of Typescript project references by creating a solution that allows for passing unique options to each

When compiling or building a project with references programmatically, I make use of the ts.createSolutionBuilder API. The challenge I face is that in my specific scenario, I do not have individual tsconfig.json files stored on the filesystem for each pac ...

typescriptproject-reference

Transform array of elements from type T1 to element in the array to type T2

Here is a Typescript class I am working with: export class Envelope<T> { result: T; constructor(result: T) { this.result = result; } } I'm trying to convert Envelope<RecentPostResponse[]> to Observable<PostModel[]>: getP ...

angulartypescriptrxjs

New techniques for integrating jQuery with Angular 4

As I delve into learning Angular 4, my goal is to apply it to various projects. While I am still grasping the basics, I have encountered noticeable differences when compared to using jQuery for DOM manipulation. The transition to using Angular has presente ...

jqueryangular

Infinite rendering caused by React custom hook

I developed a custom hook that retrieves data from a News API and provides handling for loading, errors, and data (similar to Apollo Client). The issue I'm facing is that the hook seems to trigger infinitely, even when the items in the dependency arra ...

javascriptreactjstypescriptreact-hooks

NextJs Route Groups are causing issues as they do not properly exclude themselves from the app's layout.tsx

As far as I know, the layout.tsx in the app directory serves as the root layout. To customize the layout structure for specific segments, you can use Route Groups. More information can be found here. In this setup, any page.tsx file inside a directory nam ...

reactjstypescriptnext.js

PostgreSQL reverse relationship

I have a table in my database called "textDate" class TextData extends BaseEntity{ id(primaryGeneratedColumn) ar:string en:string } This entity is used to store all text in my project, such as titles, descriptions, and other fields that have foreign ...

typescriptpostgresqlreversetypeorm