Steps for personalizing the dataset on a PrimeNG bar graph

Question

Steps for personalizing the dataset on a PrimeNG bar graph

I'm currently working with primeng in an Angular project and I need to create a bar chart where the last two horizontal bars have different colors.

Right now, the last two bars are incorrectly being assigned to represent dogs and cats. My goal is to adjust the graph so that the orange bars correspond to tiger and lion instead of dog and cat.

Due to restrictions on StackOverflow, I am unable to upload a picture directly. However, you can view the example image on this external hosting site: https://ibb.co/jZyxddC

Below is the component code snippet:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-status-logs-graph',
  templateUrl: './status-logs-graph.component.html',
  styleUrls: ['./status-logs-graph.component.scss']
})
export class StatusLogsGraphComponent implements OnInit {

  basicData: any;
  basicOptions: any;

  constructor() { 
      this.basicData = {
    labels: ['dog', 'cat', 'hamster', 'lizard', 'tiger', 'lion'],
    datasets: [
        {
            label: 'Domestic Animals',
            backgroundColor: '#42A5F5',
            data: [ 32, 54, 21, 11]
        },
        {
            label: 'Wild Animals',
            backgroundColor: '#FFA726',
            data: [28, 48]
        }
    ]
};
 }

  ngOnInit(): void {

}
}

angular typescript primeng

Answer 1

Answer №1

Primeng utilizes chartjs as its underlying framework. For detailed documentation, please refer to this link.

When working with chartjs, you have the flexibility to define custom colors for each bar in your chart. One approach is to group all animals under a single dataset and assign specific colors to each animal. However, it's important to note that hiding the default legend may be necessary as it will display generic information when using a single dataset. You can design a customized legend using HTML/CSS if needed. Below is a complete example:

var basicData = {
    labels: ['dog', 'cat', 'hamster', 'lizard', 'tiger', 'lion'],
    datasets: [
        {
            data: [ 32, 54, 21, 11, 28, 48],
            backgroundColor: [
                '#42A5F5',
                '#42A5F5',
                '#42A5F5',
                '#42A5F5',
                '#FFA726',
                '#FFA726'
            ]
        }
    ]
};
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: basicData,
    options: {
        plugins: {
            legend: {
                display: false
            }
        }
    }
});

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75e6ede4f7e1bbeff6abbaf6ece3">[email protected]</a>/dist/chart.min.js"></script>
<canvas id="myChart"></canvas>

However, this method may not be scalable for adding more data in the future. An alternative approach involves storing all data in an array and dynamically combining datasets. This allows for easier addition of new animals. Here is an illustration:

var animals = [
    {
        name: 'dog',
        data: 32,
        type: 'domestic'
    },
    {
        name: 'cat',
        data: 54,
        type: 'domestic'
    },
    {
        name: 'hamster',
        data: 21,
        type: 'domestic'
    },
    {
        name: 'lizard',
        data: 11,
        type: 'domestic'
    },
    {
        name: 'tiger',
        data: 28,
        type: 'wild'
    },
    {
        name: 'lion',
        data: 48,
        type: 'wild'
    }
];
var labels = [];
var data = [];
var colors = [];
for(var i = 0; i < animals.length; i++){
    labels.push(animals[i].name);
    data.push(animals[i].data);
    if(animals[i].type === 'domestic'){
        colors.push('#42A5F5');
    }
    else{
        colors.push('#FFA726');
    }
}
var basicData = {
    labels:labels,
    datasets: [
        {
            data: data,
            backgroundColor: colors
        }
    ]
};
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: basicData,
    options: {
        plugins: {
            legend: {
                display: false
            }
        }
    }
});

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5102030a191f550104405906101b">[email protected]</a>/dist/chart.min.js"></script>
<canvas id="myChart"></canvas>

Answer 2

Primeng utilizes chartjs as its underlying framework. For detailed documentation, please refer to this link.

When working with chartjs, you have the flexibility to define custom colors for each bar in your chart. One approach is to group all animals under a single dataset and assign specific colors to each animal. However, it's important to note that hiding the default legend may be necessary as it will display generic information when using a single dataset. You can design a customized legend using HTML/CSS if needed. Below is a complete example:

var basicData = {
    labels: ['dog', 'cat', 'hamster', 'lizard', 'tiger', 'lion'],
    datasets: [
        {
            data: [ 32, 54, 21, 11, 28, 48],
            backgroundColor: [
                '#42A5F5',
                '#42A5F5',
                '#42A5F5',
                '#42A5F5',
                '#FFA726',
                '#FFA726'
            ]
        }
    ]
};
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: basicData,
    options: {
        plugins: {
            legend: {
                display: false
            }
        }
    }
});

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75e6ede4f7e1bbeff6abbaf6ece3">[email protected]</a>/dist/chart.min.js"></script>
<canvas id="myChart"></canvas>

However, this method may not be scalable for adding more data in the future. An alternative approach involves storing all data in an array and dynamically combining datasets. This allows for easier addition of new animals. Here is an illustration:

var animals = [
    {
        name: 'dog',
        data: 32,
        type: 'domestic'
    },
    {
        name: 'cat',
        data: 54,
        type: 'domestic'
    },
    {
        name: 'hamster',
        data: 21,
        type: 'domestic'
    },
    {
        name: 'lizard',
        data: 11,
        type: 'domestic'
    },
    {
        name: 'tiger',
        data: 28,
        type: 'wild'
    },
    {
        name: 'lion',
        data: 48,
        type: 'wild'
    }
];
var labels = [];
var data = [];
var colors = [];
for(var i = 0; i < animals.length; i++){
    labels.push(animals[i].name);
    data.push(animals[i].data);
    if(animals[i].type === 'domestic'){
        colors.push('#42A5F5');
    }
    else{
        colors.push('#FFA726');
    }
}
var basicData = {
    labels:labels,
    datasets: [
        {
            data: data,
            backgroundColor: colors
        }
    ]
};
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: basicData,
    options: {
        plugins: {
            legend: {
                display: false
            }
        }
    }
});

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5102030a191f550104405906101b">[email protected]</a>/dist/chart.min.js"></script>
<canvas id="myChart"></canvas>

Answer 3

Answer №2

To hide null values in PrimeNG charts, simply utilize the Chart.js skipNull property and assign it a value of true.

(It's worth noting that all PrimeNG charts are built on top of the Chart.js library).

Answer 4

To hide null values in PrimeNG charts, simply utilize the Chart.js skipNull property and assign it a value of true.

(It's worth noting that all PrimeNG charts are built on top of the Chart.js library).

Answer 5

Answer №3

Are you looking to create separate horizontal bar charts for domestic animals and wild animals, with the domestic animal bars in different colors?

If so, I recommend utilizing Ngx-charts. You can find a helpful guide at the following link:

Answer 6

Are you looking to create separate horizontal bar charts for domestic animals and wild animals, with the domestic animal bars in different colors?

If so, I recommend utilizing Ngx-charts. You can find a helpful guide at the following link:

Steps for personalizing the dataset on a PrimeNG bar graph

Answer №1

Answer №2

Answer №3

Similar questions

The "export 'ɵɵcomponentHostSyntheticListener' (imported as 'i0') was not found in '@angular/core" error occurred during the Angular build

The protractor tool is unable to recognize an Angular component when it is displayed on the page

NPM installation stalls only when attempting to install the specific package, ts-jest

Loading external templates in Angular2 with Webpack2

The API code runs smoothly in Angular, but hits a snag when used in Ionic

What exactly does "blocking and tackling" refer to in the Angular2 documentation?

The function is failing to return the expected value received from the observable subscription

Stop the MatSort feature from activating when the space key is pressed in Angular Material

What is the process for including a new item in the p-breadcrumb list?

Changing the function to operate asynchronously

Is it possible to dynamically close the parent modal based on input from the child component?

Encountering an issue with setting up MikroORM with PostgreSQL due to a type

What causes Angular2 to detect both reference changes and primitive changes even when the OnPush flag is enabled?

Angular version 6 and its routing functionality

Encountered an error while attempting to install the @typescript-eslint/eslint-plugin

Utilizing ES6 Promises in Mongoose with Typescript to Create a Seamless Chain

Utilizing the functionalities provided by node.js, I came across an issue and sought out a solution for the error message "TypeError: __WEBPACK_IMPORTED_MODULE_3_fs__.writeFile is not a function"

Exploring the Issue with SWR Hook in Next.js using TypeScript

Troubleshooting: Angular add/edit form issue with retrieving data from a Span element within an ngFor loop

What is the best way to specify the return type in TypeScript when there is a possibility of multiple types?