systelab-charts v17.2.0

systelab-chart

Component to show a Chart

Using the component

<systelab-chart [labels]="labels" [data]="data" [showLegend]="legend" [(itemSelected)]="itemSelected" [type]="type"
                (action)="doAction($event)" [isBackgroundGrid]="isBackgroundGrid" [isHorizontal]="isHorizontal" [lineTension]="lineTension"
                [yMinValue]="yMinValue" [yMaxValue]="yMaxValue" [annotations]="annotations" [xLabelAxis]="xLabelAxis" [yLabelAxis]="yLabelAxis"
                [tooltipSettings]="tooltipSettings" [isStacked]="isStacked" [customLegend]="customLegend"
                [timeScale]="isTimeScaleChart"
                [timeUnit]="'month'"
                [tooltipTimeFormat]="'d, MMMM yyyy'"
></systelab-chart>

This component use the Chart.js library, and is able to display different chart types in an easy way.

Set type with the chart type that you want to display. You can choose between the following charts types

• Bar
• Line
• Pie
• Doughnut
• Bubble
• Radar
• Polar Area

Also, you can show together different chart types; for example a Bar chart with Line chart. In order to do this, you should define the chart type in the properties of the data that you provide to the component.

Single example:

    this.dataLine.push(new chartItem('Only Line', [13, 20, 21, 15], '', '', false, true, false, 3));

Multiple charts example:

    this.dataLineBar.push(new chartItem('Line', [13, 20, 21, 15], '', '', false, true, true, 3, 'line'));

Properties

ChartItem

ChartMultipleYAxisScales

ChartIntersectionSettings

GridLine

ScaleLabel

Ticks

Annotations

You can define two types of annotations, line or box type annotations.

annotations is an array of annotations. Depending on the annotations that you want you show, use the chartBoxAnnotation structure or chartLineAnnotation.

chartBoxAnnotation

chartLineAnnotation

chartLabelAnnotation

ChartLine

Draw a simple line

Tooltips

You can configure the content of the tooltips and the style.

ChartTooltipItem

this.dataLine.push(new ChartItem('Only Line', [13, 20, 21, 15], '', '', false, true, false, 3, '',
	new ChartTooltipItem('title', 'label', 'afterlabel', true)));

Tooltips for the Bubble charts

There is the option to display the label that you want instead of the coordinates (by default defined). Set the variable t in the data parameter and the system will consider it as the tooltip label.

[{x: 13, y: 13, r: 4, t: 'Tooltip label'}, {x: 1, y: 2, r: 3}]

Chart labels

You can configure labels to show the value of the chart's datasets (e.g. the percentage of the value over the total) To do so, there is an input attribute named "chartLabelSettings" whose needs to receive a ChartLabelSettings object.

ChartLabelSettings

Example of use: let's assume that we have the following code in a component

        this.pieChartLabelSettings = new ChartLabelSettings();
this.pieChartLabelSettings.position = new ChartLabelPosition();
this.pieChartLabelSettings.position.clip = false; // to avoid showing part of the label, set clip = true

this.pieChartLabelSettings.position.display = 'auto';
this.pieChartLabelSettings.labelColors = new ChartLabelColor(undefined, 'black', undefined, 5, 1, 0.8);
const fontFamily = 'Courier, Arial Unicode MS, Arial, sans-serif';
this.pieChartLabelSettings.chartLabelFont = new ChartLabelFont(undefined, fontFamily, 16, undefined, 'bold', 0.8);
this.pieChartLabelSettings.chartLabelPadding = new ChartLabelPadding(undefined, 1, 1, 1, 1);

const myPieLabelFormatter = (value: any, context: any
):
string => {
	let dataArr: Array<number> = (context.chart.data.datasets[0].data
	as
	Array < number >
)
	;
	return (value * 100 / arraySum(dataArr)).toFixed(0) + '%';
}

this.pieChartLabelSettings.formatter = myPieLabelFormatter;

Then we can use systelab-chart with the "chartLabelSettings" attribute among others:

        <systelab-chart [labels]="labels" [data]="dataPie" [showLegend]="legend" [(itemSelected)]="itemSelected" [type]="'pie'" (action)="doAction($event)"
                        [isBackgroundGrid]="isBackgroundGrid" [chartLabelSettings]="pieChartLabelSettings"></systelab-chart>

The auxiliary classes (ChartLabelPosition, ChartLabelColor, etc) constructors are defined as follows:

ChartLabelPosition

Example of specifiying the "display" property as a function:

const displayFunction = (context: any)
:
boolean => {

	let dataArr: Array<number> = (context.chart.data.datasets[0].data
	as
	Array < number >
)
	;

	const currentPercentage = context.dataset.data[context.dataIndex] * 100 / arraySum(dataArr);

	return currentPercentage >= 5;
}
this.pieChartLabelSettings.position.display = displayFunction;

ChartLabelColor

ChartLabelFont

Definition of the font parameter as an object:

type
Font = {
	family    ? : string,
	lineHeight? : string | number,
	size      ? : number,
	style     ? : 'normal' | 'italic' | 'oblique',
	weight    ? : 'normal' | 'bold' | 'bolder' | 'lighter' | number
};

ChartLabelPadding

Definition of the padding parameter as an object:

type
Padding = number | {
	top?: number,
	right?: number,
	bottom?: number,
	left?: number
};

ChartLabelText

ChartMeterConfiguration

Definition of a level parameter as an object:

type
Levels = {
	levelColor: string,
	minValue:   number,
	maxValue:   number
};

Events

Functions

Note: responsive and maintainAspectRatio parameters must be set to false.