LineChart A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.

Basic

Interactive and Customized

Import


import {LineChart} from 'primeng/primeng';

Getting Started

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, and the comparison of two data sets.


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


export class MyModel {

    data: any;

    msgs: Message[];

    constructor() {
        this.data = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
                {
                    label: 'My First dataset',
                    fillColor: 'rgba(220,220,220,0.2)',
                    strokeColor: 'rgba(220,220,220,1)',
                    pointColor: 'rgba(220,220,220,1)',
                    pointStrokeColor: '#fff',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgba(220,220,220,1)',
                    data: [65, 59, 80, 81, 56, 55, 40]
                },
                {
                    label: 'My Second dataset',
                    fillColor: 'rgba(151,187,205,0.2)',
                    strokeColor: 'rgba(151,187,205,1)',
                    pointColor: 'rgba(151,187,205,1)',
                    pointStrokeColor: '#fff',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgba(151,187,205,1)',
                    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

onPointsSelect event is triggered by passing the available selected points when a user clicks on the chart.


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


export class MyModel {

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

}

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
scaleBeginAtZero boolean true Whether the scale should start at zero, or an order of magnitude down from the lowest value
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.
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)
bezierCurve boolean true Whether the line is curved between points
bezierCurveTension number 0.4 Tension of the bezier curve between points
pointDot boolean true Whether to show a dot for each point
pointDotRadius number 4 Radius of each point dot in pixels
pointDotStrokeWidth number 1 Pixel width of point dot stroke
pointHitDetectionRadius number 20 amount extra to add to the radius to cater for hit detection outside the drawn point
datasetStroke boolean true Whether to show a stroke for datasets
datasetStrokeWidth number 2 Pixel width of dataset stroke
datasetFill boolean true Whether to fill the dataset with a colour
legend element Element as a local template variable. Container of legend
legendTemplate string Template for legend content. A legend template

Events

Name Parameters Description
onPointsSelect event.originalEvent: click event
event.points: selected points
Callback to invoke when value of linechart changes.

Methods

Name Parameters Description
getCanvas() - Returns the canvas element.
getBase64Image() - returns a base 64 encoded string of the chart.

Dependencies

Chart.js 1.0.2.


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

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

<h3>Interactive and Customized</h3>
<p-lineChart [value]="data" width="640" height="320" [bezierCurve]="false" [datasetFill]="false" (onPointsSelect)="onSelect($event)"></p-lineChart>


export class LineChartDemo {

    data: any;

    msgs: Message[];

    constructor() {
        this.data = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
                {
                    label: 'My First dataset',
                    fillColor: 'rgba(220,220,220,0.2)',
                    strokeColor: 'rgba(220,220,220,1)',
                    pointColor: 'rgba(220,220,220,1)',
                    pointStrokeColor: '#fff',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgba(220,220,220,1)',
                    data: [65, 59, 80, 81, 56, 55, 40]
                },
                {
                    label: 'My Second dataset',
                    fillColor: 'rgba(151,187,205,0.2)',
                    strokeColor: 'rgba(151,187,205,1)',
                    pointColor: 'rgba(151,187,205,1)',
                    pointStrokeColor: '#fff',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgba(151,187,205,1)',
                    data: [28, 48, 40, 19, 86, 27, 90]
                }
            ]
        }
    }

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

        }
    }
}