User Guide
Reference
Examples
Download
Github

lines

The lines statement adds an input data table, which is transformed according to a user-provided scale configuration and then plotted as one or more lines to the chart.

Synopsis

lines { 
  data: <dataset>;
  data-format: <dataset-format>;
  data-x: <dataset-x>;
  data-y: <dataset-y>;
  color: <color>;
  stroke-style: <stroke_style>;
  stroke-width: <stroke_width>;
  stroke-color: <color>;
  marker-shape: <marker_shape>;
  marker-size: <size>;
  marker-color: <color>;
  labels: <dataset_string>;
  label-font-size: <font_size>;
  label-color: <color>;
  label-padding: <padding>;
  scale-x: <scale>;
  scale-y: <scale>;
  limit-x: <limit>;
  limit-x-min: <limit_min>;
  limit-x-max: <limit-max>;
  limit-y: <limit>;
  limit-y-min: <limit_min>;
  limit-y-max: <limit-max>;
}

List of Options

data

Set the dataset for the current element. The dataset should be a valid CSV (RFC4180) or GeoJSON file. 

data: <path>;
Examples:
// load a csv file
data: "myfile.csv";

// load a geojson file
data: "myfile.geojson";

data-format

Explicitly set the dataset format. This is usually not required, since the format should, in most cases, be detected automatically. 

data-format: <dataset-format>;
Examples:
// set the format to CSV
data-format: csv;

// set the format to geojson
data-format: geojson;

data-x

This parameter controls how the X position of geometry is retrieved from the dataset. For CSV files, the parameter controls the name of the column that is displayed on the X axis. The default value is `"x"`. You can also use this parameter to declare an "inline" data list. 

data-x: <key>;
data-x: list(<value>...);
Examples:
// reference the "mycolumn" column
data-x: mycolumn;

// list of static values
data-x: list(10 20 30);

data-y

This parameter controls how the Y position of geometry is retrieved from the dataset. For CSV files, the parameter controls the name of the column that is displayed on the Y axis. The default value is `"y"`. You can also use this parameter to declare an "inline" data list. 

data-y: <key>;
data-y: list(<value>...);
Examples:
// reference the "mycolumn" column
data-y: mycolumn;

// list of static values
data-y: list(10 20 30);

color

Set the stroke and marker color.

color: <color>;
Examples:
;; set the color to grey
color: #eee;

;; set the color to red, 50% transparent
color: rgba(1 0 0 .5);

stroke-style

Set the line's stroke style.

stroke-style: (<stroke-style>);
Examples:
;; set the stroke to dashed
stroke-style: dashed;

stroke-width

Set the line's stroke width.

stroke-width: <measure>;
Examples:
;; set the stroke width to 2pt
stroke-width: 2pt;

stroke-color

Set the stroke color.

stroke-color: <color>;
Examples:
;; set the color to grey
stroke-color: #eee;

;; set the color to red, 50% transparent
stroke-color: rgba(1 0 0 .5);

marker-shape

The lines statement adds an input data table, which is transformed according to a user-provided scale configuration and then plotted as one or more lines to the chart.

marker-size

Set the marker size for the plot. If set to a value greater than zero, a 'marker' will be drawn for each point in the dataset at the points (x, y) coordinate.

marker-size: <measure>;
Examples:
;; set size to 2pt
marker-size: 2pt;

marker-color

Set the marker color.

marker-color: <color>;
Examples:
;; set the color to grey
marker-color: #eee;

;; set the color to red, 50% transparent
marker-color: rgba(1 0 0 .5);

labels

Set the labels dataset. If provided, a label will be drawn for each point in the dataset at the corresponding (x, y) coordinate. The number of entries in the 'labels' dataset must match the number of entries in the 'x' and 'y' datasets exactly.

labels: list(<values>...);
labels: csv(<file> <column>);
Examples:
;; list of static values
labels: list("A" "B" "C");

;; load a csv file
labels: csv(myfile.csv mycolumn);

label-font-size

Set the label font size.

label-font-size: <measure>;
Examples:
;; set the font size to 14pt
label-font-size: 14pt;

label-color

Set the label color.

label-color: <color>;
Examples:
;; set the color to grey
label-color: #eee;

;; set the color to red, 50% transparent
label-color: rgba(1 0 0 .5);

label-padding

Set the label padding/spacing.

label-padding: <measure>;
Examples:
;; set the padding to 2em
label-padding: 2em;

scale-x

Set the type of the 'x' (horizontal) scale.

scale-x: [linear] [log] [logarithmic] [invert] [inverted];

List of scale types: - `linear` - Standard linear scale - `log`, `logarithmic` - Logarithmic (log10) scale - `invert`, `inverted` - Flip the scale

Examples:
;; set the scale to logarithmic mode
scale-x: log;

;; set the scale to inverted mode
scale-x: invert;

scale-y

Set the type of the 'y' (vertical) scale.

scale-y: [linear] [log] [logarithmic] [invert] [inverted];

List of scale types: - `linear` - Standard linear scale - `log`, `logarithmic` - Logarithmic (log10) scale - `invert`, `inverted` - Flip the scale

Examples:
;; set the scale to logarithmic mode
scale-y: log;

;; set the scale to inverted mode
scale-y: invert;

limit-x

Set the limits (minimum and maximum values) for the 'x' (horizontal) scale.

limit-x: <min> <max;
Examples:
;; set limits to [1..10]
limit-x: 1 10;

limit-x-min

Set the minimum value (lower limit) for the 'x' (horizontal) scale.

limit-x-min: <min>;
Examples:
;; set the lower limit to 2
limit-x-min: 2;

limit-x-max

Set the maximum value (upper limit) for the 'x' (horizontal) scale.

limit-x-max: <value>;
Examples:
;; set the upper limit to 20
limit-x-max: 20;

limit-y

Set the limits (minimum and maximum values) for the 'y' (vertical) scale.

limit-y: <min> <max;
Examples:
;; set limits to [1..10]
limit-y: 1 10;

limit-y-min

Set the minimum value (lower limit) for the 'y' (vertical) scale.

limit-y-min: <min>;
Examples:
;; set the lower limit to 2
limit-y-min: 2;

limit-y-max

Set the maximum value (upper limit) for the 'y' (vertical) scale.

limit-y-max: <value>;
Examples:
;; set the upper limit to 20
limit-y-max: 20;

Examples

Example: examples/charts-basic/linechart_timeseries

Edit this page on GitHub