Chart.js in Angular 2

1. 1. Installation
2. 2. Ticks Congiguration
   1. 2.1. Beginning From Zero
   2. 2.2. Change Scale Label
   3. 2.3. Two y-scales
3. 3. Tooltips Congiguration

• Installation

You can install ng2-charts using npm

npm install ng2-charts --save

You need to install and include Chart.js library in application via html or webpack bundler (more options can be found in official chart.js Documentation)
E.g.,

npm install chart.js --save

Important: Embedding Chart.js in application is mandatory!

<script src="node_modules/chart.js/src/chart.js"></script>

Or

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>

Demo and API details of ng2-charts can be found here: Demo and Source code.

• Ticks Congiguration

The tick configuration is nested under the scale configuration in the ticks key. It defines options for the tick marks that are generated by the axis.

• Beginning From Zero

scales: {
	yAxes: [{
	    ticks: {
	        beginAtZero: true
	        }
	    }]    
	}

• Change Scale Label

Creating Custom Tick Formats

The callback method may be used for advanced tick customization. In the following example, every label of the Y axis would be displayed in scientific notation. If the callback returns null or undefined the associated grid line will be hidden.

scales: {
	yAxes: [{
	    ticks: {
	        callback: function (label, index, labels) {
                        return label / 1000 + 'k';
                    },
                    scaleLabel: {
                        display: true,
                        labelString: '1k = 1000'
                    }
	        }
	    }]    
	}

• Two y-scales

scales: {
    yAxes: [{
        ticks: {
        position: "left",
        "id": "y-axis-0"
    }, {
        ticks: {
            max: 10,
            min: -50,
            stepSize: 10,
            display: false
        },
        position: "right",
        "id": "y-axis-1"
    }]
},

with corresponding dataset

this.barChartData.push({data: data1, label: 'a', yAxisID: "y-axis-0"});
this.barChartData.push({data: data2, label: 'b', yAxisID: "y-axis-1"});

• Tooltips Congiguration

Sometime we have to apply tooltips in special style in chart.js.
For example, in the following code, the 1st and 2nd data sets show tooltips in currency format, while the 3rd data set has tooltip with percentage symbole as sufix.

barChartOptions:any = {
    tooltips: {
        callbacks: {
            label: function (tooltipItems, data) {
                if (tooltipItems.datasetIndex == 2) {
                    return data.datasets[tooltipItems.datasetIndex].label + ': ' + tooltipItems.yLabel + '%';
                } else {
                    return data.datasets[tooltipItems.datasetIndex].label + ': ' +
                        tooltipItems.yLabel.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                }
            }
        }
	
    }
}

Here, we implemented tooltip label callback function.

Callback	Arguments	Description
label	tooltipItem, data	Text to render for an individual item in the tooltip

All functions are called with the same arguments: a tooltip item and the data object passed to the chart. All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text.

Tooltip Item Interface

The tooltip items passed to the tooltip callbacks implement the following interface.

{
    // X Value of the tooltip as a string
    xLabel: String,

    // Y value of the tooltip as a string
    yLabel: String,

    // Index of the dataset the item comes from
    datasetIndex: Number,

    // Index of this data item in the dataset
    index: Number,

    // X position of matching point
    x: Number,

    // Y position of matching point
    y: Number,
}

---

Ref

1. Chart.js
2. Documentation
3. Demo
4. Source code