@folkehelseinstituttet/angular-highcharts NPM

FHI Angular Highcharts

An opinionated wrapper to the official minimal Highcharts wrapper for Angular

FHI Angular Highcharts

Dependencies

FHI Angular Highcharts	FHI Angular Componets	FHI Style	Bootstrap	NgBootstrap	Highcharts	Highcharts Angular	Angular	Node/NPM
3.2	4	6.2	5.3.2	16	11.4	4.0	17	18/10 *
3.1	4.0	6.2	5.3.2	16	11.4	4.0	17	18/10 *
3	4.0	6	5.3.2	16	11.1	4.0	17	18/10 *
2	3.1	5.9	5.3.2	16	11.1	4.0	17	18/10 *
1	-	5	5	15	11.1	4.0	16	18/9 *
0.7	-	5	5	14	11.1	3.1.2	15	18/9 *
0.6	-	5	5	14	10.3.3	3.1	15	18/9 *
0.5	-	5	5	14	10.3.3	3.1	15	18/9 *
0.4	-	5	5		10.3.3	3.1	15	18/9 *
0.3	-	5	5		10.3.3	3.1	15	18/9 *
0.2	-	4	5		10.3.3	3.1	15	18/9 *
0.1	-	4	5		10.3	3	14	16/8 *

For more dependencies see peerDependencies in package.json

* designsystem.fhi.no uses these Node/NPM versions, older versions may work, but then you're on your own :wink:

Get started

Install

Install with npm: npm install @folkehelseinstituttet/angular-highcharts

Add to app

After installing the package and all dependencies, add the following code to your app:

// In global css-file (usually style.scss)
@import "./node_modules/@folkehelseinstituttet/angular-highcharts/styles/import/all";

// In a standalone component or a shared module
import { FhiAngularHighchartsModule } from '@folkehelseinstituttet/angular-highcharts';
...
  imports: [FhiAngularHighchartsModule]
...

// In a component (.ts)
import { FhiDiagramOptions, FhiDiagramSerie, FhiDiagramTypeIds } from '@folkehelseinstituttet/angular-highcharts';
...
  data: FhiDiagramSerie[] = [...];
  diagramOptions: FhiDiagramOptions = {
    title: 'Diagram title',
    data: data,
    diagramTypeId: 'line'
  };
...

<!-- In a template -->
<fhi-angular-highcharts [diagramOptions]="diagramOptions"></fhi-angular-highcharts>

Remove warnings

Highcharts gives some warnings due to the use of CommonJs as described here: https://github.com/highcharts/highcharts/issues/14183

From one of the comments:

Highcharts uses the UMD pattern which includes AMD, and it is probably detected by angular. On the other hand, I don't think that using an ES6 module pattern will change anything in the performance matters, you would have to import the entire highcharts core anyway, so technically it will be the same package - I would suggest ignoring the warning by adding Highcharts to the allowedCommonJsDependencies property in the angular.json file.

This is where allowedCommonJsDependencies i located in angular.json

...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "allowedCommonJsDependencies": ["highcharts"],
...

API

Inputs

Input	Type	Default	Required	Description
`[diagramOptions]`	`FhiDiagramOptions`	-	yes	All properties used to configure the diagram. See FhiDiagramOptions for details. NB! The object sent in to `@Input diagramOptions` needs to be reassigned for change detection to kick in.

Outputs

Output	Event type	Description
`(diagramTypeNavigation)`	`FhiDiagramTypeIds`	If diagram type navigation i visible, this event will fire on every navigation. Outputs an existing diagram type id.
`(metadataButtonClick)`	`void`	When link to "Om dataene" is clicked.

Type FhiDiagramOptions

Property	Type	Default	Required	Description
`creditsHref`	`string`	-	no	Link to source ref. in footer.
`creditsText`	`string`	-	no	Text to source ref. in footer.
`diagramTypeId`	`string`	`table`	no	ID to specify default diagram type. Values defined by enum `FhiDiagramTypeIds`
`diagramTypeNavId`	`string`	-	no	ID to specify which type of navigation to use. If omitted, no navigation will be rendered. Values defined by enum `DiagramTypeNavIds`
`[diagramTypeSubset]`	`Array<string>`	-	no	ID's for diagram types available in navigation, in addition to `table`. If omitted, all diagram types that are possible for the given series will show in the navigation. Values for each array item defined by enum `FhiDiagramTypeIds`
`disclaimer`	`string`	-	no	Text at the bootom of the footer used to say something about uncertainty in the data shown in a diagram.
`[flags]`	`Array<FhiDiagramFlag>`	-	no	List of all flags used in `FhiDiagramSerie[]`.
`metadataButton`	`boolean`	`false`	no	Possible to activate a button to trigger or navigate to metadata information in a way you desire.
`lastUpdated`	`string`	-	no	Text after label Sist oppdatert in footer. Free format, but `dd.mm.yyyy` is the most common one.
`mapTypeId`	`MapTypeIds`	-	no	ID to specify map type. If omitted, map will not be available in the diagram navigation.
`[openSource]`	`boolean`	`true`	no	If `false`; the link to Highcharts.com disappears, AND LICENSE IS REQUIRED!
`[series]`	`Array<FhiDiagramSerie>`	-	yes	The data used to render a diagram. See FhiDiagramSerie for details.
`tableOrientation`	`string`	-	no	Transpose table by setting preferd orientation. Values defined by enum `FhiTableOrientations`
`title`	`string`	-	yes	The title above the diagram.
`unit`	`Array<FhiDiagramUnit>`	-	no	Decimal count, and metadata for y-axis and tooltip.

Type FhiDiagramSerie

Property	Type	Default	Required	Description
`data`	`Array<FhiDiagramSerieData>`	-	yes	The individual data points in a serie.
`name`	`string \\| Array<string>`	-	yes	The name of the serie as shown in the legend. NB! The type `string` is an formatted string; pipe (`\\|`) is beeing used as seperator between category names if more than one category name is concatenated to one single serie name. To avoid dependency on a given separator, use an array of category names instead.
`stack`	`string`	-	yes	This option allows for grouping series in a stacked chart. Only applies to diagramTypeId `barStacked` and `columnStacked`.

Type FhiDiagramSerieData

FhiDiagramSerieData is a custum type for FHI Angular Highcharts, but it is based on the smallest possible subset of the chart.series.[chart type].data object as described under nr 3. here (line chart used as example).

Property	Type	Default	Required	Description
`name`	`string`	-	yes	The name of the data point as shown in the tooltip.
`y`	`number \\| string`	-	yes	The value of the data point. If type is `string` the data point is treated as a flagged value.

Type FhiDiagramFlag

Property	Type	Default	Required	Description
`label`	`string`	-	yes	Description of the flag, ie. Anonymized
`symbol`	`string`	-	yes	Symbol representing the flag, ie. `:`.

Type FhiDiagramUnit

Property	Type	Default	Required	Description
`decimals`	`number`	-	no	The decimal count. If not set the decimal count same as in data. Count is limited to 14 decimals due to loss of precision at runtime above 14. A warning will be given in the consol if more than 14 decimals.
`label`	`string`	-	yes	The vertical y-axis label, showing next to the axis line.
`symbol`	`string`	-	no	Symbol before or after the value in both tooltip and y-axis.
`position`	`string`	-	no	Wether the symbol i placed before or after the numbers in the diagram. Possible values: `'start' \\| 'end'`