BarChart A bar chart or bar graph is a chart that presents Grouped data with rectangular bars with lengths proportional to the values that they represent.

Basic

Interactive and Customized

Import


import {BarChart} from 'primeng/primeng';

Getting Started

A bar chart is a way of showing data as bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.


<p-barChart [value]="data" width="640" height="320"></p-barChart>


export class MyModel {

    data: any;

    constructor() {
        this.data = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
                {
                    label: 'My First dataset',
                    fillColor: '#42A5F5',
                    strokeColor: '#1E88E5',
                    data: [65, 59, 80, 81, 56, 55, 40]
                },
                {
                    label: 'My Second dataset',
                    fillColor: '#9CCC65',
                    strokeColor: '#7CB342',
                    data: [28, 48, 40, 19, 86, 27, 90]
                }
            ]
        }
    }

}

Legend

To display a legend, pass an element as a local template variable where legend content would be generated.


<p-barChart [value]="data" width="640" height="320" [legend]="lgnd"></p-barChart>
<div #lgnd></div>

Content of legend can be customized with legendTemplate attribute that defaults to;


"<ul class=\"<%=name.toLowerCase()%>-legend\">
    <% for (var i=0; i<datasets.length; i++){%>
        <li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li>
    <%}%>
</ul>"

Event

onBarsSelect event is triggered by passing the available selected bars when a user clicks on the chart.


<p-barChart [value]="data" width="640" height="320" (onBarsSelect)="onSelect($event)"></p-barChart>


export class MyModel {

    onSelect(event) {
        //event.originalEvent = click event
        //event.bars = array of selected bars
    }

}

Attributes

Name Type Default Description
animation boolean true Whether to animate the chart
animationSteps number 60 Number of animation steps
animationEasing string easeOutQuart Animation easing effect
showScale boolean true If we should show the scale at all
scaleOverride boolean false If we want to override with a hard coded scale
scaleSteps number null The number of steps in a hard coded scale
scaleStepWidth number null The value jump in the hard coded scale
scaleStartValue number null The scale starting value
scaleLineColor string rgba(0,0,0,.1) Colour of the scale line
scaleLineWidth number 1 Pixel width of the scale line
scaleShowLabels boolean true Whether to show labels on the scale
scaleLabel string <%=value%> Interpolated JS string - can access value
scaleIntegersOnly boolean true hether the scale should stick to integers, not floats even if drawing space is there
scaleFontFamily string 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif' Scale label font declaration for the scale label
scaleFontSize number 12 Scale label font size in pixels
scaleFontStyle string normal Scale label font weight style
scaleFontColor string #666 Scale label font colour
responsive boolean false whether or not the chart should be responsive and resize when the browser does.
maintainAspectRatio boolean true whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
showTooltips boolean true Determines whether to draw tooltips on the canvas or not
tooltipFillColor string rgba(0,0,0,0.8) Tooltip background colour
tooltipFontFamily string 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif' Tooltip label font declaration for the scale label
tooltipFontSize number 14 Tooltip label font size in pixels
tooltipFontStyle string normal Tooltip font weight style
tooltipFontColor string #fff Tooltip label font colour
tooltipTitleFontFamily string 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif' Tooltip title font declaration for the scale label
tooltipTitleFontSize number 14 Tooltip title font size in pixels
tooltipTitleFontStyle string bold Tooltip title font weight style
tooltipTitleFontColor string #fff Tooltip title font colour
tooltipYPadding number 6 pixel width of padding around tooltip text
tooltipXPadding number 6 pixel width of padding around tooltip text
tooltipCaretSize number 6 Size of the caret on the tooltip
tooltipCornerRadius number 6 Pixel radius of the tooltip border
tooltipXOffset number 10 Pixel offset from point x to tooltip edge
tooltipTemplate string <%if (label){%><%=label%>: <%}%><%= value %> Template string for single tooltips
multiTooltipTemplate string <%= value %> emplate string for multiple tooltips
value array null An object with labels and datasets as array properties.
width number null Width of canvas in pixels.
height number null Height of canvas in pixels.
scaleBeginAtZero boolean true Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleShowGridLines boolean true Whether grid lines are shown across the chart
scaleGridLineColor string rgba(0,0,0,.05) Colour of the grid lines
scaleGridLineWidth number 1 Width of the grid lines
scaleShowHorizontalLines boolean true Whether to show horizontal lines (except X axis)
scaleShowVerticalLines boolean true Whether to show vertical lines (except Y axis)
barShowStroke boolean true If there is a stroke on each bar
barStrokeWidth number 2 Pixel width of the bar stroke
barValueSpacing number 5 Spacing between each of the X value sets
barDatasetSpacing number 1 Spacing between data sets within X values
legend element Element as a local template variable. Container of legend
legendTemplate string Template for legend content. A legend template

Events

Name Parameters Description
onBarsSelect event.originalEvent: click event
event.bars: selected bars
Callback to invoke when value of barchart changes.

Dependencies

Chart.js 1.0.2.


<p-growl [value]="msgs"></p-growl>

<h3 class="first">Basic</h3>
<p-barChart [value]="data" width="640" height="320"></p-barChart>

<h3>Interactive and Customized</h3>
<p-barChart [value]="data" width="640" height="320" (onBarsSelect)="onSelect($event)" [barShowStroke]="false" [barValueSpacing]="10"></p-barChart>


export class BarChartDemo {

    data: any;

    msgs: Message[];

    constructor() {
        this.data = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
                {
                    label: 'My First dataset',
                    fillColor: '#42A5F5',
                    strokeColor: '#1E88E5',
                    data: [65, 59, 80, 81, 56, 55, 40]
                },
                {
                    label: 'My Second dataset',
                    fillColor: '#9CCC65',
                    strokeColor: '#7CB342',
                    data: [28, 48, 40, 19, 86, 27, 90]
                }
            ]
        }
    }

    onSelect(event) {
        if(event.bars) {
            this.msgs = [];
            for(var i = 0; i < event.bars.length; i++) {
                this.msgs.push({severity: 'info', summary: 'Bar Selected', 'detail': event.bars[i].label + ' ' + event.bars[i].value});
            }

        }
    }
}