Micro chart

Micro chart details

This component is themable.

Tagged with chart data angular component

Related topics: Chart

Micro charts are smaller versions of charts. The amount of information shown is reduced to the bare minimum. They use little screen estate and are used to indicate a trend.

´ Loading interactive demo...
<dt-micro-chart [series]="series" [labelFormatter]="_formatterFn"> <dt-chart-tooltip> <ng-template let-tooltip> {{tooltip.y | dtCount}} </ng-template> </dt-chart-tooltip> </dt-micro-chart> export class MicroChartDefaultExampleComponent { series: DtChartSeries = { name: 'Requests', data: generateData(40, 1000, 2000, 1370304000000, 900000), }; _formatterFn = (input: number) => formatCount(input).toString(); } <dt-micro-chart [series]="series" [labelFormatter]="_formatterFn"> <dt-chart-tooltip> <ng-template let-tooltip> {{tooltip.y | dtCount}} </ng-template> </dt-chart-tooltip> </dt-micro-chart> export class MicroChartDefaultExampleComponent { series: DtChartSeries = { name: 'Requests', data: generateData(40, 1000, 2000, 1370304000000, 900000), }; _formatterFn = (input: number) => formatCount(input).toString(); }

Variants

There are two main categories for micro charts, the ones that are showing data of a single timestamp (datapoint charts) and those which are showing data of a timeframe (timeseries-charts).

Datapoint charts:

Bar chart

microchart-bar

Stacked bar chart

microchart-stacked-bar

Pie or donut chart

microchart-donut

Datapoint micro charts show one or multiple metrics. A legend is not necessary if the key is mentioned somewhere else (e.g. headline, label, etc.)

If datapoint micro charts are grouped they will share a legend component together.

microchart-grouped-bars

Timeseries charts:

Line chart

´ Loading interactive demo...
<dt-micro-chart [series]="series" [labelFormatter]="_formatterFn"> <dt-chart-tooltip> <ng-template let-tooltip> {{tooltip.y | dtCount}} </ng-template> </dt-chart-tooltip> </dt-micro-chart> export class MicroChartDefaultExampleComponent { series: DtChartSeries = { name: 'Requests', data: generateData(40, 1000, 2000, 1370304000000, 900000), }; _formatterFn = (input: number) => formatCount(input).toString(); } <dt-micro-chart [series]="series" [labelFormatter]="_formatterFn"> <dt-chart-tooltip> <ng-template let-tooltip> {{tooltip.y | dtCount}} </ng-template> </dt-chart-tooltip> </dt-micro-chart> export class MicroChartDefaultExampleComponent { series: DtChartSeries = { name: 'Requests', data: generateData(40, 1000, 2000, 1370304000000, 900000), }; _formatterFn = (input: number) => formatCount(input).toString(); }

Column chart

´ Loading interactive demo...
<dt-micro-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> {{tooltip.y | dtCount}} </ng-template> </dt-chart-tooltip> </dt-micro-chart> export class MicroChartColumnsExampleComponent { options: DtChartOptions = { chart: { type: 'column', }, }; series: DtChartSeries = { name: 'Requests', data: generateData(40, 200000, 300000, 1370304000000, 900000), }; } <dt-micro-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> {{tooltip.y | dtCount}} </ng-template> </dt-chart-tooltip> </dt-micro-chart> export class MicroChartColumnsExampleComponent { options: DtChartOptions = { chart: { type: 'column', }, }; series: DtChartSeries = { name: 'Requests', data: generateData(40, 200000, 300000, 1370304000000, 900000), }; }

Stacked column chart

Behaviour and corner cases

Theming

The entire micro chart is themable and follows the usual theming conventions for charts.

Interactions

Micro charts do not allow for interactions except of their wrapper component. In addition they do not provide any hover states or tooltips.

Extremes

It is possible to show maximum or minimum values in micro charts. The values are displayed as labels which are attached to specific data points or bars. They will be highlighted in a darker contrast color of the same color palette.

microchart-timeline

Interpolation of missing datapoints

If there is missing data in a timeseries micro chart, interpolated data will be shown with a dashed line. If the missing datapoint is in the beginning or in the end of a series, either the value of the first or last existing datapoint will be used.

microchart-timeline-interpolation

Do's and dont's

You can't click or navigate inside a micro chart. Use a chart if needed.

The microchart components wraps the chart component. Find more details about theming and reflow on the chart page.

´ Loading interactive demo...
<dt-micro-chart [series]="series" [labelFormatter]="_formatterFn"> <dt-chart-tooltip> <ng-template let-tooltip> {{tooltip.y | dtCount}} </ng-template> </dt-chart-tooltip> </dt-micro-chart> export class MicroChartDefaultExampleComponent { series: DtChartSeries = { name: 'Requests', data: generateData(40, 1000, 2000, 1370304000000, 900000), }; _formatterFn = (input: number) => formatCount(input).toString(); } <dt-micro-chart [series]="series" [labelFormatter]="_formatterFn"> <dt-chart-tooltip> <ng-template let-tooltip> {{tooltip.y | dtCount}} </ng-template> </dt-chart-tooltip> </dt-micro-chart> export class MicroChartDefaultExampleComponent { series: DtChartSeries = { name: 'Requests', data: generateData(40, 1000, 2000, 1370304000000, 900000), }; _formatterFn = (input: number) => formatCount(input).toString(); }

Imports

You have to import the DtMicroChartModule when you want to use the dt-micro-chart:

@NgModule({
  imports: [
    DtMicroChartModule,
  ],
})
class MyModule {}

Initialization

To use a Dynatrace microchart, add the <dt-micro-chart> element to the view and set options and series data using the appropriate attributes.

Options & Properties

Name Type Default Description
@Input() options DtChartOptions | undefined undefined Sets options for the chart. DtChartOptions extends from Highcharts.Options, but removes the series property. The series property is passed as its own input.
@Input() series Observable<DtChartSeries> | DtChartSeries | undefined undefined Sets the series of the chart. The type can either be a stream of series data for continuous updates or a static array.
@Input() labelFormatter (input: number) => string | undefined undefined Sets the label formatter function for the min and max data point.
@Output() updated EventEmitter<void> - Event emitted when the chart options or series are updated.

Getter

Name Return value Description
seriesId string | undefined Gets the series id of the series currently used in the chart.
highchartsOptions Options Returns highchart options which are used in the chart.

Content children

As the microchart component is a wrapper for charts, the same content children – e.g. a dt-chart-tooltip – can be used. Find details on the chart page.

Examples

Columns example

´ Loading interactive demo...
<dt-micro-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> {{tooltip.y | dtCount}} </ng-template> </dt-chart-tooltip> </dt-micro-chart> export class MicroChartColumnsExampleComponent { options: DtChartOptions = { chart: { type: 'column', }, }; series: DtChartSeries = { name: 'Requests', data: generateData(40, 200000, 300000, 1370304000000, 900000), }; } <dt-micro-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> {{tooltip.y | dtCount}} </ng-template> </dt-chart-tooltip> </dt-micro-chart> export class MicroChartColumnsExampleComponent { options: DtChartOptions = { chart: { type: 'column', }, }; series: DtChartSeries = { name: 'Requests', data: generateData(40, 200000, 300000, 1370304000000, 900000), }; }

Streamed values example

´ Loading interactive demo...
<dt-micro-chart [options]="options" [series]="series$"> <dt-chart-tooltip> <ng-template let-tooltip> {{tooltip.y | dtCount}} </ng-template> </dt-chart-tooltip> </dt-micro-chart> export class MicroChartStreamExampleComponent { options: DtChartOptions = { chart: { type: 'column', }, }; series$: Observable<DtChartSeries> = timer(1000, 5000) .pipe(map(() => ({ name: 'Requests', type: 'column', data: generateData(40, 0, 200, 1370304000000, 900000), }))); } <dt-micro-chart [options]="options" [series]="series$"> <dt-chart-tooltip> <ng-template let-tooltip> {{tooltip.y | dtCount}} </ng-template> </dt-chart-tooltip> </dt-micro-chart> export class MicroChartStreamExampleComponent { options: DtChartOptions = { chart: { type: 'column', }, }; series$: Observable<DtChartSeries> = timer(1000, 5000) .pipe(map(() => ({ name: 'Requests', type: 'column', data: generateData(40, 0, 200, 1370304000000, 900000), }))); }

Interpolated values example

´ Loading interactive demo...
<dt-micro-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> {{tooltip.y | dtCount}} </ng-template> </dt-chart-tooltip> </dt-micro-chart> export class MicroChartInterpolatedExampleComponent { options: DtChartOptions = { interpolateGaps: true, }; series: DtChartSeries = { name: 'Requests', data: generateData(40, 0, 200, 1370304000000, 900000) .map(([x, y]: [number, number]) => ({x, y: Math.random() > 0.3 ? y : undefined})), }; } <dt-micro-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> {{tooltip.y | dtCount}} </ng-template> </dt-chart-tooltip> </dt-micro-chart> export class MicroChartInterpolatedExampleComponent { options: DtChartOptions = { interpolateGaps: true, }; series: DtChartSeries = { name: 'Requests', data: generateData(40, 0, 200, 1370304000000, 900000) .map(([x, y]: [number, number]) => ({x, y: Math.random() > 0.3 ? y : undefined})), }; }

Columns interpolated values example

´ Loading interactive demo...
<dt-micro-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> {{tooltip.y | dtCount}} </ng-template> </dt-chart-tooltip> </dt-micro-chart> export class MicroChartColumnsInterpolatedExampleComponent { options: DtChartOptions = { chart: { type: 'column', }, interpolateGaps: true, }; series: DtChartSeries = { name: 'Requests', data: generateData(40, 0, 200, 1370304000000, 900000) .map(([x, y]: [number, number]) => ({x, y: Math.random() > 0.3 ? y : undefined})), }; } <dt-micro-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> {{tooltip.y | dtCount}} </ng-template> </dt-chart-tooltip> </dt-micro-chart> export class MicroChartColumnsInterpolatedExampleComponent { options: DtChartOptions = { chart: { type: 'column', }, interpolateGaps: true, }; series: DtChartSeries = { name: 'Requests', data: generateData(40, 0, 200, 1370304000000, 900000) .map(([x, y]: [number, number]) => ({x, y: Math.random() > 0.3 ? y : undefined})), }; }