CODEWITHSUNDEEP
angularuser-interfacefrontendprimengangular9
avishekdr
avishekdr

Reputation: 1068

Angular: PrimeNG Organization Chart not rendering the chart properly

I have implemented an organization chart by PrimeNG as per my requirement. My data from the TreeNode type array is getting rendered in UI properly but the design is not. Below is my code:

app.module.ts

import {OrganizationChartModule} from 'primeng/organizationchart';
imports: [ OrganizationChartModule ]

thankyou.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ApplicationService } from '../service-application/application.service';
import {TreeNode} from 'primeng/api';

@Component({
  selector: 'app-thankyou',
  templateUrl: './thankyou.component.html',
  styleUrls: ['./thankyou.component.css'],
  encapsulation: ViewEncapsulation.None
})

export class ThankyouComponent implements OnInit {

  totObtainedMarks: number = 0;
  totTotalMarks: number = 0;
  marks: TreeNode[];
  constructor(public appService: ApplicationService) {}

  ngOnInit() {
    let result = [];
    for(let i of this.appService.result) {
      let mark: any;
      this.totObtainedMarks += i.obtainedMarks;
      this.totTotalMarks += i.totalMarks;
      mark = {
        label: i.questionCategory + ': ' + i.obtainedMarks.toString() + '/' + this.totTotalMarks.toString()
      };
      result.push(mark);
    }
    this.marks = [{
      label: 'Total: ' + this.totObtainedMarks.toString() + '/' + this.totTotalMarks.toString(),
      children: result
    }];
  }
}

thankyou.component.html

<p-organizationChart [value]="marks"></p-organizationChart>

The view I am getting: view

I followed the official documentation for creating this but still not able to understand what's the problem. Please help me out.

Upvotes: 1

Views: 2595

Answers (1)

Roy
Roy

Reputation: 8069

When I check out the most basic example of a organisational chart from PrimeNG on StackBlitz and look into the angular.json, some style references need to be added in order to make it work.

StackBlitz example without styles

StackBlitz example without styles You can clearly see, that something is not right, and it looks quite the same as your problem.

StackBlitz example with styles in angular.json

When adding (or not commenting out) these CSS references lines in the angular.json file, correct styles are being applied to your organisational chart.

"styles": [
    "src/styles.css",
    "node_modules/primeng/resources/themes/nova-light/theme.css",
    "node_modules/primeng/resources/primeng.min.css",
    "node_modules/primeicons/primeicons.css"
],

See this updated StackBlitz for a working example, including the correct styles applied and a nice hierarchical structure in your browser output.

StackBlitz outcome with styles

Get started guide

When digging further, it's even mentioned in the 'Get Started' guide of PrimeNG.

Dependencies Majority of PrimeNG components (95%) are native and there are some exceptions having 3rd party dependencies. In addition, components require PrimeIcons for icons.

The css dependencies are as follows, Prime Icons, theme of your choice and structural css of components.

Here you have the option to include the styles via HTML references or via Angular CLI (as we did like above):

<link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/nova-light/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />

"styles": [
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/nova-light/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  //...
],

Upvotes: 1

Related Questions