Micro chart

The micro chart is responsible for indicating a trend. It is used within other UI components.

´ 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), }; }
´ 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(); }

This components wraps the chart component, so for theming and reflow see DtChart.

Imports

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


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

Initialization

To use the dynatrace chart, add the <dt-micro-chart options="myoptions" series="myseries" ></dt-micro-chart> element to the view:

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 it's 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 continues 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 Description Return value
seriesId Gets the series id of the series currently used in the chart string | undefined
highchartsOptions returns highchart options which are used in the chart Options

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), }))); }