Line Chart

Line Chart

Swimlane Line Chart - StackBlitzStackBlitz

Inputs

Property	Type	Default Value	Description
view	number[]		the dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size
results	object[]		the chart data
scheme	object		the color scheme of the chart
schemeType	string	'ordinal'	the color scale type. Can be either 'ordinal' or 'linear'
customColors	function or object		custom colors for the chart. Used to override a color for a specific value
animations	boolean	true	enable animations
rangeFillOpacity	number	0.15	opacity of the shadow around the line indication the (optional) min and max values. The range shadow is only displayed if min and max values are provided with the data. The color of the shadow is alwas the color of the central line.
legend	boolean	false	show or hide the legend
legendTitle	string	'Legend'	the legend title
legendPosition	string	'right'	the legend position ['right', 'below']
xAxis	boolean	false	show or hide the x axis
yAxis	boolean	false	show or hide the y axis
showGridLines	boolean	true	show or hide the grid lines
roundDomains	boolean	false	round domains for aligned gridlines
showXAxisLabel	boolean	false	show or hide the x axis label
showYAxisLabel	boolean	false	show or hide the y axis label
xAxisLabel	string		the x axis label text
yAxisLabel	string		the y axis label text
trimXAxisTicks	boolean	true	trim or not ticks on the x axis
trimYAxisTicks	boolean	true	trim or not ticks on the Y axis
rotateXAxisTicks	boolean	true	enable automic rotation of x-axis ticks to prevent overlaps
maxXAxisTickLength	number	16	max length of the ticks. If trimXAxisTicks is true, ticks over this length will be trimmed
maxYAxisTickLength	number	16	max length of the ticks. If trimYAxisTicks is true, ticks over this length will be trimmed
xAxisTickFormatting	function		the x axis tick formatting
yAxisTickFormatting	function		the y axis tick formatting
xAxisTicks	any[]		predefined list of x axis tick values
yAxisTicks	any[]		predefined list of y axis tick values
timeline	boolean	false	display a timeline control under the chart. Only available if a the x scale is linear or time
autoScale	boolean	false	set the minimum value of the y axis to the minimum value in the data, instead of 0 (ignored if yScaleMin is defined)
curve	function		the interpolation function used to generate the curve. It accepts any d3.curve function
gradient	boolean	false	fill elements with a gradient instead of a solid color
activeEntries	object[]	[]	elements to highlight
tooltipDisabled	boolean	false	show or hide the tooltip
tooltipTemplate	TemplateRef		a custom ng-template to be displayed inside the tooltip when hovering a single point
seriesTooltipTemplate	TemplateRef		a custom ng-template to be displayed inside the tooltip when hovering series
referenceLines	object[]		an array of reference lines to be shown behind the chart. Every reference line should be of format {name, value}
showRefLines	boolean	false	show or hide the reference lines
showRefLabels	boolean	true	show or hide the reference line labels
xScaleMin	any		the minimum value of the x axis (if the x scale is linear or time)
xScaleMax	any		the maximum value of the x axis (if the x scale is linear or time)
yScaleMin	number		the minimum value of the y axis
yScaleMax	number		the maximum value of the y axis
wrapTicks	boolean	false	axis tick labels will wrap based on available space

Outputs

Property	Description
select	click event
activate	element activation event (mouse enter)
deactivate	element deactivation event (mouse leave)

Data Format

Regular line charts

The data format is multi series:

[
  {
    "name": "Germany",
    "series": [
      {
        "name": "2010",
        "value": 7300000
      },
      {
        "name": "2011",
        "value": 8940000
      }
    ]
  },

  {
    "name": "USA",
    "series": [
      {
        "name": "2010",
        "value": 7870000
      },
      {
        "name": "2011",
        "value": 8270000
      }
    ]
  }
]

Line charts indicating the range of the data

The data format is multi series. Plus, the minimum and the maximum value of each data point are provided. For instance, you can use these values to show the error margin of your data. Another use case are cumulated data. The central line show the average values. The range shows indicates the distribution of the data.

[
  {
    "name": "Germany",
    "series": [
      {
        "name": "2010",
        "value": 7300000,
        "min": 7000000,
        "max": 7600000
      },
      {
        "name": "2011",
        "value": 8940000,
        "min": 8840000,
        "max": 9300000
      }
    ]
  },

  {
    "name": "USA",
    "series": [
      {
        "name": "2010",
        "value": 7870000,
        "min": 7800000,
        "max": 7950000
      },
      {
        "name": "2011",
        "value": 8270000,
        "min": 8170000,
        "max": 8300000
      }
    ]
  }
]