import {BarChart} from 'primeng/primeng';
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] } ] } } }
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>"
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 } }
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 |
Name | Parameters | Description |
---|---|---|
onBarsSelect | event.originalEvent: click event event.bars: selected bars |
Callback to invoke when value of barchart changes. |
Chart.js
<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}); } } } }