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. |
Name | Parameters | Description |
---|---|---|
getCanvas() | - | Returns the canvas element. |
getBase64Image() | - | returns a base 64 encoded string of the chart. |
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});
}
}
}
}