Chart

The chart component represents one or more metrics. It depends on the given data which of the available chart types should be used to visualize it.

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points" [key]="data.series.name" [value]="data.point.y"> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartDefaultExampleComponent { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, { title: null, labels: { format: '{value}/min', }, opposite: true, tickInterval: 50, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'column', yAxis: 1, data: generateData(40, 0, 200, 1370304000000, 900000), }, { name: 'Failed requests', type: 'column', yAxis: 1, data: generateData(40, 0, 15, 1370304000000, 900000), }, { name: 'Failure rate', type: 'line', data: generateData(40, 0, 20, 1370304000000, 900000), }]; } // tslint:enable:no-magic-numbers export class ChartDefaultExampleComponent { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, { title: null, labels: { format: '{value}/min', }, opposite: true, tickInterval: 50, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'column', yAxis: 1, data: generateData(40, 0, 200, 1370304000000, 900000), }, { name: 'Failed requests', type: 'column', yAxis: 1, data: generateData(40, 0, 15, 1370304000000, 900000), }, { name: 'Failure rate', type: 'line', data: generateData(40, 0, 20, 1370304000000, 900000), }]; } // tslint:enable:no-magic-numbers

Variants

The following chart types are available:

Area chart

Area chart

Area range chart

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points" [key]="data.series.name" [value]="data.point.y"> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartAreaRangeExampleComponent { options: Highcharts.Options = { chart: { type: 'arearange', }, xAxis: { type: 'datetime', }, }; series = [{ name: 'Temperatures', data: [ [1483232400000, 1.4, 4.7], [1483318800000, -1.3, 1.9], [1483405200000, -0.7, 4.3], [1483491600000, -5.5, 3.2], [1483578000000, -9.9, -6.6], [1483664400000, -9.6, 0.1], [1483750800000, -0.9, 4], [1483837200000, -2.2, 2.9], [1483923600000, 1.3, 2.3], [1484010000000, -0.3, 2.9], [1484096400000, 1.1, 3.8], [1484182800000, 0.6, 2.1], [1484269200000, -3.4, 2.5], [1484355600000, -2.9, 2], [1484442000000, -5.7, -2.6], [1484528400000, -8.7, -3.3], [1484614800000, -3.5, -0.3], [1484701200000, -0.2, 7], [1484787600000, 2.3, 8.5], [1484874000000, 5.6, 9.5], [1484960400000, 0.4, 5.8], [1485046800000, 0.1, 3.1], [1485133200000, 1.5, 4.1], [1485219600000, -0.2, 2.8], [1485306000000, 2.3, 10.3], ], }]; } // tslint:enable:no-magic-numbers export class ChartAreaRangeExampleComponent { options: Highcharts.Options = { chart: { type: 'arearange', }, xAxis: { type: 'datetime', }, }; series = [{ name: 'Temperatures', data: [ [1483232400000, 1.4, 4.7], [1483318800000, -1.3, 1.9], [1483405200000, -0.7, 4.3], [1483491600000, -5.5, 3.2], [1483578000000, -9.9, -6.6], [1483664400000, -9.6, 0.1], [1483750800000, -0.9, 4], [1483837200000, -2.2, 2.9], [1483923600000, 1.3, 2.3], [1484010000000, -0.3, 2.9], [1484096400000, 1.1, 3.8], [1484182800000, 0.6, 2.1], [1484269200000, -3.4, 2.5], [1484355600000, -2.9, 2], [1484442000000, -5.7, -2.6], [1484528400000, -8.7, -3.3], [1484614800000, -3.5, -0.3], [1484701200000, -0.2, 7], [1484787600000, 2.3, 8.5], [1484874000000, 5.6, 9.5], [1484960400000, 0.4, 5.8], [1485046800000, 0.1, 3.1], [1485133200000, 1.5, 4.1], [1485219600000, -0.2, 2.8], [1485306000000, 2.3, 10.3], ], }]; } // tslint:enable:no-magic-numbers

Bar chart

Bar chart
Stacked bar chart
Horizontal bar chart

Donut or pie chart

In donut charts the visualization of the legend can vary.

Donut chart

Donut chart

Donut chart

Pie chart

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> {{tooltip.x}} {{tooltip.point.colorIndex}} </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartPieExampleComponent { options: Highcharts.Options = { chart: { type: 'pie', }, tooltip: { formatter(): string | boolean { return `${this.key}&nbsp${this.y}%`; }, }, legend: { align: 'right', borderWidth: 0, enabled: true, layout: 'vertical', symbolRadius: 0, verticalAlign: 'middle', floating: true, }, plotOptions: { pie: { showInLegend: true, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [{ name: 'Browsers', data: [ { name: 'Chrome', y: 55, }, { name: 'Firefox', y: 25, }, { name: 'Edge', y: 15, }], }]; } // tslint:enable:no-magic-numbers {{tooltip.x}} {{tooltip.point.colorIndex}} export class ChartPieExampleComponent { options: Highcharts.Options = { chart: { type: 'pie', }, tooltip: { formatter(): string | boolean { return `${this.key} ${this.y}%`; }, }, legend: { align: 'right', borderWidth: 0, enabled: true, layout: 'vertical', symbolRadius: 0, verticalAlign: 'middle', floating: true, }, plotOptions: { pie: { showInLegend: true, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [{ name: 'Browsers', data: [ { name: 'Chrome', y: 55, }, { name: 'Firefox', y: 25, }, { name: 'Edge', y: 15, }], }]; } // tslint:enable:no-magic-numbers

Line chart

Line chart
line: 2px

Min/Max chart

The min/max chart shows the area between a minimum and a maximum value. The average or median is represented by a line.

The min/max chart can be combined with a bar chart. In this case the blend mode of the min/max chart is set to multiply.

Min/max chart

Mixed chart

Mixed charts combine different chart types, e.g. a bar chart and a line chart. In mixed charts use a dark shade for the lines to ensure readability. Area charts use bright colors and are moved to the back.

Mixed chart

Chart colors

It depends on the number of shown metrics what colors should be used for the chart.

Up to 3 metrics

If there are not more than 3 metrics in the chart, use the theme color of the entity. Consider the shades and order described in the themed chart colors.

More than 3 metrics

If more colors are needed (e.g. for custom charting), please use the sorted chart colors.

Chart colors

Chart legend

The chart legend is always placed below the chart, except for the donut or pie chart where the placement of the legend can vary (see above).

Legend icons

The icons in the chart legend are always 16x16px. Please use the following icons as legends:

Behavior

There are many possible interactions with a chart component.

Toggle metrics

If there is more than one metric visualized in a chart, clicking a chart legend toggles the visibility of the according metric. Clicking a chart legend disables the metric, therefore it's possible to focus on individual metrics in a chart. Clicking the legend a second time re-enables the metric.

Disabled chart legend
font-color: $gray-300
icon-color: $gray-300

Zooming and panning in charts

On hover the zooming and panning buttons appear in the upper left corner of the chart.

Panning

On click and drag the cursor changes from the default one to a horizontal move cursor (ew-resize) and the user can pan the chart to the left and right. Clicking the arrow buttons on the top left, the chart jumps a whole time interval to the right or left.

Zooming

Zooming in charts is possible via pressing shift + alt + scrolling up or down or using the zoom buttons + and -.

Zooming and panning in charts
Zooming and panning buttons
x: 8px
y: 28px
icon: 20px
Please have a look at the style of the secondary button for hover and disabled states. For the zoom in button use the plus icon, for the zoom out button the minus icon. For the panning buttons use the arrow icon.

Charts in use

Loading chart values

When chart values are not yet available a loading indicator is shown until all data has been loaded and can be displayed. Have a look at the loading distractor component for details about styling and usage.

´ Loading interactive demo...
<button dt-button (click)="toggleData()">toggle data</button> <dt-chart [options]="options" [series]="series" loading-text="Loading..."></dt-chart> export class ChartLoadingExampleComponent { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, ], }; series: DtChartSeries[] | null; toggleData(): void { const dummyData = [{ name: 'Failure rate', type: 'line', color: Colors.ROYALBLUE_700, data: generateData(40, 0, 20, 1370304000000, 900000), }]; this.series = !this.series ? dummyData : null; } } // tslint:enable:no-magic-numbers export class ChartLoadingExampleComponent { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, ], }; series: DtChartSeries[] | null; toggleData(): void { const dummyData = [{ name: 'Failure rate', type: 'line', color: Colors.ROYALBLUE_700, data: generateData(40, 0, 20, 1370304000000, 900000), }]; this.series = !this.series ? dummyData : null; } } // tslint:enable:no-magic-numbers

Chart overlays

For detailed information about chart metrics overlays are used. They appear on hover over specific value points within the chart. For information about styling and behavior of chart overlays view the overlay styleguide.

Example with chart

Heatfields (optional)

Problems and events in charts can be displayed as heatfields. On hover, further information is displayed in an interactive overlay. This overlay contains a short description and a link. It can be fixed with a click. The overlay will appear on the left or right side of the heatfield depending on the available space.

Chart with heat field

Default

Heatfields default
height: 8px
fill: $red-500
outline: 2px solid white
border-radius: 3px
margin-bottom: 2px

Hover

Heatfields hover
fill: $red-600
outline: 2px solid white

Selected

Heatfields selected
x: 8px
height: 12px
fill: $red-700
outline: 2px solid white
border-radius: 3px
margin-bottom: 2px
chart-background: $red-100 // heatfield area only
Interactive Overlay

Switching metrics

The metrics displayed in the chart can be switched by button groups that are placed above the chart.

Chart tabs

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points" [key]="data.series.name" [value]="data.point.y"> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartDefaultExampleComponent { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, { title: null, labels: { format: '{value}/min', }, opposite: true, tickInterval: 50, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'column', yAxis: 1, data: generateData(40, 0, 200, 1370304000000, 900000), }, { name: 'Failed requests', type: 'column', yAxis: 1, data: generateData(40, 0, 15, 1370304000000, 900000), }, { name: 'Failure rate', type: 'line', data: generateData(40, 0, 20, 1370304000000, 900000), }]; } // tslint:enable:no-magic-numbers export class ChartDefaultExampleComponent { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, { title: null, labels: { format: '{value}/min', }, opposite: true, tickInterval: 50, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'column', yAxis: 1, data: generateData(40, 0, 200, 1370304000000, 900000), }, { name: 'Failed requests', type: 'column', yAxis: 1, data: generateData(40, 0, 15, 1370304000000, 900000), }, { name: 'Failure rate', type: 'line', data: generateData(40, 0, 20, 1370304000000, 900000), }]; } // tslint:enable:no-magic-numbers

This dt-chart component wraps highcharts to be used within angular.

Imports

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


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

Initialization

To use the dynatrace chart, add the <dt-chart options="myoptions" series="myseries" ></dt-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<Highcharts.IndividualSeriesOptions[]> | Highcharts.IndividualSeriesOptions[] | 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.
@Output() updated EventEmitter<void> Event emitted when the chart options or series are updated

Methods

Name Description Return value
getSeries Gets the series currently used in the chart DtChartSeries
getAllIds returns all series ids used in the chart Array<string>

Theming

The chart will take a chart color for the series data if no color is specified for the series. If no theme is set the default color palette is used. For charts within themes with no more than 3 series a theme palette is available. For charts with more than 3 series, an ordered list of chart colors for good contrast is used.

Example:


<div dtTheme="purple">
  <dt-chart options="myoptions" series="myseries" ></dt-chart>
</div>

Reflow

The chart needs the ViewportResizer provider. ViewportResizer notifies the dt-chart component about Viewport changes that trigger a reflow of the dt-chart.

Tooltip

The chart supports adding a tooltip that works with angular components inside. The dt-chart component takes a dt-chart-tooltip component as a content child. The dt-chart-tooltip component needs a ng-template as a content child. This ng-template receives the same object passed to the context as the "normal" highcharts tooltip formatter function would receive. Don't forget to declare the variable for the implicit context on the ng-template.

  <dt-chart ... >
    <dt-chart-tooltip>
      <ng-template let-tooltipdata>
        
      </ng-template>
    </dt-chart-tooltip>
  </dt-chart>

Heatfield

The chart supports adding heatfields. The dt-chart component takes dt-chart-heatfield components as content children. The dt-chart-heatfield component is themeable. By setting the color to main you can use the heatfield for overload prevention usecases.

  <dt-chart ... >
    <dt-chart-heatfield [start]="start" [end]="end"></dt-chart-heatfield>
  </dt-chart>

Options & Properties

Name Type Default Description
@Input() start number The start numerical/date value on the x axis of the chart
@Input() end number The end numerical/date value on the x axis of the chart
@Input() active boolean false Wether the heatfield is active
@Input() aria-label string The aria label used for the heatfield button
@Input() loading-text string The loading text of the loading distractor
@Input() color 'error' | 'main' 'error' The aria label used for the heatfield button
@Output() activeChange Eventemitter<DtChartHeatfieldActiveChange> Fires every time when the active state changes

Examples

Stream example with colors

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series$" loading-text="Loading..."></dt-chart> export class ChartStreamExampleComponent { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}/min', }, tickInterval: 50, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, tooltip: { formatter(): string | boolean { return `${this.series.name}&nbsp${this.y}`; }, }, }; series$: Observable<IndividualSeriesOptions[]>; constructor(private _chartService: ChartService) { this.series$ = this._chartService.getStreamedChartdata(); } } // tslint:enable:no-magic-numbers export class ChartStreamExampleComponent { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}/min', }, tickInterval: 50, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, tooltip: { formatter(): string | boolean { return `${this.series.name} ${this.y}`; }, }, }; series$: Observable; constructor(private _chartService: ChartService) { this.series$ = this._chartService.getStreamedChartdata(); } } // tslint:enable:no-magic-numbers

Chart with more than 3 series example

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points" [key]="data.series.name" [value]="data.point.y"> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartOrderdColorsExampleComponent { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, { title: null, labels: { format: '{value}/min', }, opposite: true, tickInterval: 50, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'column', yAxis: 1, data: generateData(40, 0, 200, 1370304000000, 900000), }, { name: 'Failed requests', type: 'column', yAxis: 1, data: generateData(40, 0, 15, 1370304000000, 900000), }, { name: 'Failure rate', type: 'line', data: generateData(40, 0, 20, 1370304000000, 900000), }, { name: 'Failure rate new', type: 'line', data: generateData(40, 0, 20, 1370304000000, 900000), }]; } // tslint:enable:no-magic-numbers export class ChartOrderdColorsExampleComponent { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, { title: null, labels: { format: '{value}/min', }, opposite: true, tickInterval: 50, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'column', yAxis: 1, data: generateData(40, 0, 200, 1370304000000, 900000), }, { name: 'Failed requests', type: 'column', yAxis: 1, data: generateData(40, 0, 15, 1370304000000, 900000), }, { name: 'Failure rate', type: 'line', data: generateData(40, 0, 20, 1370304000000, 900000), }, { name: 'Failure rate new', type: 'line', data: generateData(40, 0, 20, 1370304000000, 900000), }]; } // tslint:enable:no-magic-numbers

Loading example

´ Loading interactive demo...
<button dt-button (click)="toggleData()">toggle data</button> <dt-chart [options]="options" [series]="series" loading-text="Loading..."></dt-chart> export class ChartLoadingExampleComponent { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, ], }; series: DtChartSeries[] | null; toggleData(): void { const dummyData = [{ name: 'Failure rate', type: 'line', color: Colors.ROYALBLUE_700, data: generateData(40, 0, 20, 1370304000000, 900000), }]; this.series = !this.series ? dummyData : null; } } // tslint:enable:no-magic-numbers export class ChartLoadingExampleComponent { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, ], }; series: DtChartSeries[] | null; toggleData(): void { const dummyData = [{ name: 'Failure rate', type: 'line', color: Colors.ROYALBLUE_700, data: generateData(40, 0, 20, 1370304000000, 900000), }]; this.series = !this.series ? dummyData : null; } } // tslint:enable:no-magic-numbers

Categorized

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"></dt-chart> export class ChartCategorizedExampleComponent { options: Highcharts.Options = { xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, tooltip: { formatter(): string | boolean { return `${this.series.name}&nbsp${this.y}`; }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'column', data: [100, 80, 130, 90, 80, 60, 120, 100, 30, 90, 110, 120], }]; } // tslint:enable:no-magic-numbers export class ChartCategorizedExampleComponent { options: Highcharts.Options = { xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, tooltip: { formatter(): string | boolean { return `${this.series.name} ${this.y}`; }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'column', data: [100, 80, 130, 90, 80, 60, 120, 100, 30, 90, 110, 120], }]; } // tslint:enable:no-magic-numbers

Pie chart

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> {{tooltip.x}} {{tooltip.point.colorIndex}} </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartPieExampleComponent { options: Highcharts.Options = { chart: { type: 'pie', }, tooltip: { formatter(): string | boolean { return `${this.key}&nbsp${this.y}%`; }, }, legend: { align: 'right', borderWidth: 0, enabled: true, layout: 'vertical', symbolRadius: 0, verticalAlign: 'middle', floating: true, }, plotOptions: { pie: { showInLegend: true, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [{ name: 'Browsers', data: [ { name: 'Chrome', y: 55, }, { name: 'Firefox', y: 25, }, { name: 'Edge', y: 15, }], }]; } // tslint:enable:no-magic-numbers {{tooltip.x}} {{tooltip.point.colorIndex}} export class ChartPieExampleComponent { options: Highcharts.Options = { chart: { type: 'pie', }, tooltip: { formatter(): string | boolean { return `${this.key} ${this.y}%`; }, }, legend: { align: 'right', borderWidth: 0, enabled: true, layout: 'vertical', symbolRadius: 0, verticalAlign: 'middle', floating: true, }, plotOptions: { pie: { showInLegend: true, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [{ name: 'Browsers', data: [ { name: 'Chrome', y: 55, }, { name: 'Firefox', y: 25, }, { name: 'Edge', y: 15, }], }]; } // tslint:enable:no-magic-numbers

AreaRange chart

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points" [key]="data.series.name" [value]="data.point.y"> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartAreaRangeExampleComponent { options: Highcharts.Options = { chart: { type: 'arearange', }, xAxis: { type: 'datetime', }, }; series = [{ name: 'Temperatures', data: [ [1483232400000, 1.4, 4.7], [1483318800000, -1.3, 1.9], [1483405200000, -0.7, 4.3], [1483491600000, -5.5, 3.2], [1483578000000, -9.9, -6.6], [1483664400000, -9.6, 0.1], [1483750800000, -0.9, 4], [1483837200000, -2.2, 2.9], [1483923600000, 1.3, 2.3], [1484010000000, -0.3, 2.9], [1484096400000, 1.1, 3.8], [1484182800000, 0.6, 2.1], [1484269200000, -3.4, 2.5], [1484355600000, -2.9, 2], [1484442000000, -5.7, -2.6], [1484528400000, -8.7, -3.3], [1484614800000, -3.5, -0.3], [1484701200000, -0.2, 7], [1484787600000, 2.3, 8.5], [1484874000000, 5.6, 9.5], [1484960400000, 0.4, 5.8], [1485046800000, 0.1, 3.1], [1485133200000, 1.5, 4.1], [1485219600000, -0.2, 2.8], [1485306000000, 2.3, 10.3], ], }]; } // tslint:enable:no-magic-numbers export class ChartAreaRangeExampleComponent { options: Highcharts.Options = { chart: { type: 'arearange', }, xAxis: { type: 'datetime', }, }; series = [{ name: 'Temperatures', data: [ [1483232400000, 1.4, 4.7], [1483318800000, -1.3, 1.9], [1483405200000, -0.7, 4.3], [1483491600000, -5.5, 3.2], [1483578000000, -9.9, -6.6], [1483664400000, -9.6, 0.1], [1483750800000, -0.9, 4], [1483837200000, -2.2, 2.9], [1483923600000, 1.3, 2.3], [1484010000000, -0.3, 2.9], [1484096400000, 1.1, 3.8], [1484182800000, 0.6, 2.1], [1484269200000, -3.4, 2.5], [1484355600000, -2.9, 2], [1484442000000, -5.7, -2.6], [1484528400000, -8.7, -3.3], [1484614800000, -3.5, -0.3], [1484701200000, -0.2, 7], [1484787600000, 2.3, 8.5], [1484874000000, 5.6, 9.5], [1484960400000, 0.4, 5.8], [1485046800000, 0.1, 3.1], [1485133200000, 1.5, 4.1], [1485219600000, -0.2, 2.8], [1485306000000, 2.3, 10.3], ], }]; } // tslint:enable:no-magic-numbers

Heatfield & Overload prevention

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"> <dt-chart-heatfield [start]="10000" [end]="20000"> <p> Problem 1:<br/> Failure rate increase </p> <a class="dt-link">View problem details</a> </dt-chart-heatfield> <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points" [key]="data.series.name" [value]="data.point.y"> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartHeatfieldExampleComponent { options: Highcharts.Options = { chart: { spacingLeft: 100, spacingRight: 100, }, xAxis: { type: 'datetime', min: 0, max: 100000, }, yAxis: [ { title: null, labels: { enabled: false, }, tickLength: 0, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'line', data: generateData(11, 0, 200, 0, 10000), }]; } // tslint:enable:no-magic-numbers

Problem 1:
Failure rate increase

View problem details
export class ChartHeatfieldExampleComponent { options: Highcharts.Options = { chart: { spacingLeft: 100, spacingRight: 100, }, xAxis: { type: 'datetime', min: 0, max: 100000, }, yAxis: [ { title: null, labels: { enabled: false, }, tickLength: 0, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'line', data: generateData(11, 0, 200, 0, 10000), }]; } // tslint:enable:no-magic-numbers
´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"> <dt-chart-heatfield [start]="10000" [end]="20000"> Problem 1:<br/> <a class="dt-link">View problem details</a> </dt-chart-heatfield> <dt-chart-heatfield [start]="40000" [end]="60000" color="main"> Overload prevention:<br/> <a class="dt-link">View overload prevention</a> </dt-chart-heatfield> <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points" [key]="data.series.name" [value]="data.point.y"> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartHeatfieldMultipleExampleComponent { options: Highcharts.Options = { chart: { spacingLeft: 100, spacingRight: 100, }, xAxis: { type: 'datetime', min: 0, max: 100000, }, yAxis: [ { title: null, labels: { enabled: false, }, tickLength: 0, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'line', data: generateData(11, 0, 200, 0, 10000), }]; } // tslint:enable:no-magic-numbers Problem 1:
View problem details
Overload prevention:
View overload prevention
export class ChartHeatfieldMultipleExampleComponent { options: Highcharts.Options = { chart: { spacingLeft: 100, spacingRight: 100, }, xAxis: { type: 'datetime', min: 0, max: 100000, }, yAxis: [ { title: null, labels: { enabled: false, }, tickLength: 0, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'line', data: generateData(11, 0, 200, 0, 10000), }]; } // tslint:enable:no-magic-numbers