Chart

Overview

The Chart Component is used to display different types of charts in the Infinity application. The Chart Component uses the APIs exposed in the Chartjs library to render different types of charts such as Line chart, Bar chart, and Donut chart.

This version of the Chart Component uses the Chartjs v3.5.1 to implement the charts. For more information about implementing various charts using the Chartjs library in the Chart Component, refer the Chartjs API v3.5.1 documentation.

The Chart Component provides the following features for a developer.

• The data points in the X and Y axis are configurable based on the values to be displayed on the chart.
• Displays values as a pop-up while hovering on the data points.
• Multiple lines or areas can be displayed in a chart. For example, in a Performance chart, this feature can be used to display the portfolio and the benchmark in the same chart.
• The Colors used in the chart are configurable.

NOTE: The Chart Component is used inside the Mobile Banking application.

Chart Component Contracts

The Chart Component contains contracts for customizing the data and properties for the widgets. The Chart Component contains the following contracts for customization.

• Data
• axesFormatter
• onError Event
• setData Method

Data

The Data contract is used to set the chart type and data points in the Chart Component. This contract also provides various display options for the component. This includes options to enable responsive behavior, setting the scales for implementing the chart, and options to display the legend of the chart.

Here is a sample of the JSON object provided in the Data contract for implementing a Line chart using the Chart Component.

{
	type: 'line',
	data: {
		labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
		datasets: [{
			label: 'Dataset',
			data: [1, 20, 15, 40, 20, 5, 15, 20, 10, 30, 35, 49],
			borderColor: '#003E75',
			backgroundColor: '#0475C450',
			fill: 'origin',
			borderWidth: 1,
			pointBackgroundColor: '#003e75',
		}]
	},
	options: {
		responsive: true,
		maintainAspectRatio: false,
		scales: {
			x: {
				grid: {
					color: '#e3e3e3',
					borderDash: [2, 2],
				},
				ticks: {
					color: '#647277',
				}
			},
			y: {
				position: 'right',
				grid: {
					color: '#e3e3e3',
					borderDash: [2, 2],
				},
				ticks: {
					color: '#647277',
				},
			},
		},
		plugins: {
			legend: false,
			filler: {
				propagate: false,
			},
			title: {
				display: true,
				text: 'Line Chart'
			}
		},
		interaction: {
			intersect: false,
		}
	},
}

The JSON object assigned to the Data contract for a Line chart contains the following key-value pairs.

axesFormatter

The axesFormatter contract of the Chart Component is used to provide extra formatting to the X and Y axis.

Here is a sample of the JSON object provided in the axesFormatter contract of the Chart Component.

{
	y: {
		prefix: "$",
		suffix: "K"
	}
}

onError Event

The OnError event is invoked when an error occurs during the user journey. When the onError event is invoked, an error object is passed to the parent widget. This object contains information about the error as well as where it had occurred.

var errordata = {
	"level": "ComponentViewController",
	"method": "render",
	"error": err
};
this.onError(errordata);

setData Method

This method is used to set the data and axesFormatter properties in the component.

this.view.chartComp.setData(data, axesFormatter);