Micro 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 mainly 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(); } {{tooltip.y | dtCount}} export class MicroChartDefaultExampleComponent { series: DtChartSeries = { name: 'Requests', data: generateData(40, 1000, 2000, 1370304000000, 900000), }; _formatterFn = (input: number) => formatCount(input).toString(); }

Variants

´ 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), }; } {{tooltip.y | dtCount}} export class MicroChartColumnsExampleComponent { options: DtChartOptions = { chart: { type: 'column', }, }; series: DtChartSeries = { name: 'Requests', data: generateData(40, 200000, 300000, 1370304000000, 900000), }; }

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(); } {{tooltip.y | dtCount}} 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), }; } {{tooltip.y | dtCount}} 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), }))); } {{tooltip.y | dtCount}} export class MicroChartStreamExampleComponent { options: DtChartOptions = { chart: { type: 'column', }, }; series$: Observable = 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})), }; } {{tooltip.y | dtCount}} 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})), }; } {{tooltip.y | dtCount}} 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})), }; }