Chartjs.DataSets.Line

The Line dataset is the most general dataset - it can be used for line graphs, area charts, and even scatter plots

= Numbers (List Float)

| Points (List ( Float, Float ))

These datasets can be made from two different data formats Either a list of numbers can be specified, or a list of (x, y) tuples

See https://www.chartjs.org/docs/latest/general/data-structures.html for more info

type alias DataSet =

{ type_ : LineDataSetType

, label : String

, data : DataPoints

, hidden : Maybe Bool

, order : Maybe Int

, indexAxis : Maybe IndexAxis

, xAxisID : Maybe String

, yAxisID : Maybe String

, backgroundColor : Maybe (PointProperty Color)

, borderColor : Maybe (PointProperty Color)

, borderWidth : Maybe (PointProperty Float)

, borderDash : Maybe (PointProperty Float)

, borderDashOffset : Maybe Float

, borderCapStyle : Maybe String

, borderJoinStyle : Maybe String

, cubicInterpolationMode : Maybe String

, fill : Maybe FillMode

, lineTension : Maybe Float

, pointBackgroundColor : Maybe (PointProperty Color)

, pointBorderColor : Maybe (PointProperty Color)

, pointBorderWidth : Maybe (PointProperty Float)

, pointRadius : Maybe (PointProperty Float)

, pointStyle : Maybe (PointProperty PointStyle)

, pointRotation : Maybe (PointProperty Float)

, pointHitRadius : Maybe (PointProperty Float)

, pointHoverBackgroundColor : Maybe (PointProperty Color)

, pointHoverBorderColor : Maybe (PointProperty Color)

, pointHoverBorderWidth : Maybe (PointProperty Float)

, pointHoverRadius : Maybe (PointProperty Float)

, showLine : Maybe Bool

, spanGaps : Maybe Bool

, steppedLine : Maybe SteppedLine

}

For further information on these properties, see https://www.chartjs.org/docs/latest/charts/line.html

defaultLineFromLabel : String -> DataSet

Create a Line dataset with just a label

setLabel : String -> DataSet -> DataSet

Set the label for this dataset

setData : List Float -> DataSet -> DataSet

Set the data displayed by this dataset This is a list of floats, where each float is represented as a point on the line

setPointData : List ( Float, Float ) -> DataSet -> DataSet

Set the data displayed by this dataset, in a point based format This is a list of tuples, where each tuple defines the X, Y location of a point

setHidden : Bool -> DataSet -> DataSet

Set whether this dataset should be hidden from the chart

setOrder : Int -> DataSet -> DataSet

Set the drawing order of the dataset This also affects stacking, tooltips, and legends

Lines

Line datasets are super easy to create - just provide a dataset label and a list of numbers:

defaultLineFromData "Dataset Label" [ 1, 2, 3, 4, 5 ]

defaultLineFromData : String -> List Float -> DataSet

Create a Line dataset with a label and data list To create a dataset from points, see defaultLineFromPointData

You can then adjust the line styling with pipeline operators:

defaultLineFromData "Dataset Label" [ 1, 2, 3, 4, 5 ]
    |> setBorderWidth 4
    |> setLineTension 0.5

setBorderColor : PointProperty Color -> DataSet -> DataSet

Color of the line

setBorderWidth : PointProperty Float -> DataSet -> DataSet

Line width (in pixels)

setBorderDash : PointProperty Float -> DataSet -> DataSet

Length and spacing of line dashes

setBorderDashOffset : Float -> DataSet -> DataSet

Offset for line dashes

setBorderCapStyle : String -> DataSet -> DataSet

Cap style of the line

setBorderJoinStyle : String -> DataSet -> DataSet

Joint style of the line

By default, the line will linearly connect points. You can adjust the interpolation, or set the line to produce a stepped chart instead:

setShowLine : Bool -> DataSet -> DataSet

Whether the line for this dataset should be drawn

setCubicInterpolationMode : String -> DataSet -> DataSet

Which cubic interpolation mode to use 'default' uses a weighted cubic interpolation 'monotone' is better at preserving monotonicity

setLineTension : Float -> DataSet -> DataSet

Beizer curve tension 0 is straight lines

This option is ignored if cubicInterpolation is set to 'monotone'

setSteppedLine : SteppedLine -> DataSet -> DataSet

Set the step interpolation for the line

If set to anything other than false, lineTension will be ignored

type SteppedLine

= NoInterpolation

| BeforeInterpolation

| AfterInterpolation

Step Interpolation for lines https://www.chartjs.org/docs/3.3.2/charts/line.html#stepped

BeforeInterpolation: Step-before Interpolation

AfterInterpolation: Step-after Interpolation

Radars

Radars are esentially a line dataset, but on a radial axis. These are slightly different internally, so you will need to create them slightly differently:

defaultRadarFromData "DatasetLabel" [ 1, 2, 3, 4, 5 ]

Alternatively:

defaultLineFromData "Dataset Label" [ 1, 2, 3, 4, 5 ]
    |> setLineDatasetType Radar

defaultRadarFromLabel : String -> DataSet

Create a Radar dataset with a label

defaultRadarFromData : String -> List Float -> DataSet

Create a Radar dataset with a label

type LineDataSetType

= Line

| Radar

Chart.js requires the type to be specified for datasets and trying to have a line type on a radar chart causes some issues

This type allows explicitness whether this dataset is a line dataset or a radar dataset

setLineDatasetType : LineDataSetType -> DataSet -> DataSet

Set the dataset type for this dataset

For most cases (yes, even scatter plots), Line works fine For radar datasets, this needs to be set to Radar

Scatters

Scatter charts are essentially line charts without a line

defaultLineFromPointData "Scatter" [ ( 1, 2 ), ( 2, 5 ), ( 3, 8 ) ]
    |> setShowLine False

For best results, you'll also want to assign a linear scale to your chart

defaultLineFromPointData : String -> List ( Float, Float ) -> DataSet

Create a Line dataset with a label and points list

You can style the points in various ways.

setPointBackgroundColor : PointProperty Color -> DataSet -> DataSet

Fill color for points

setPointBorderColor : PointProperty Color -> DataSet -> DataSet

Border color for points

setPointBorderWidth : PointProperty Float -> DataSet -> DataSet

Border width (in pixels) for points

setPointRadius : PointProperty Float -> DataSet -> DataSet

Radius of the point shape

setPointStyle : PointProperty PointStyle -> DataSet -> DataSet

Style of the point

setPointRotation : PointProperty Float -> DataSet -> DataSet

Rotation of the point (in degrees)

Certain properties are used to change how points are displayed when hovered over:

setPointHitRadius : PointProperty Float -> DataSet -> DataSet

Hit radius for point interactivity

setPointHoverBackgroundColor : PointProperty Color -> DataSet -> DataSet

Fill color for points when hovered

setPointHoverBorderColor : PointProperty Color -> DataSet -> DataSet

Border color for points when hovered

setPointHoverBorderWidth : PointProperty Float -> DataSet -> DataSet

Border width for points when hovered

setPointHoverRadius : PointProperty Float -> DataSet -> DataSet

Radius for points when hovered

Filling Areas

defaultLineFromData "Filled Chart" [ 1, 2, 3, 4, 5 ]
    |> setFill (Boundary Origin)

setFill : FillMode -> DataSet -> DataSet

How to fill the area under the line

The most common use case would be filling the area under a line. For that, you'll want to use Boundary Origin:

defaultLineFromData "Title" data
    |> setBackgroundColor Color.red
    |> setFill (Boundary Origin)

For more information, check out https://www.chartjs.org/docs/latest/charts/area.html

type FillMode

= Absolute Int

| Relative Int

| Boundary FillBoundary

| Disabled

Fill modes handle how area charts should be displayed Can be:

an absolute dataset index
a relative dataset index
between the dataset and the boundaries

type FillBoundary

= Start

| End

| Origin

Which boundary to use when using FillBoundary Can be the scale origin, start, or end

setBackgroundColor : PointProperty Color -> DataSet -> DataSet

Fill color of the area under the bar Applies for area charts

Other

See the Scale module for more information on custom axes

setIndexAxis : IndexAxis -> DataSet -> DataSet

Which axis to use for indexing Set to XAxis for a vertical chart, set to YAxis for a horizontal chart

setXAxisID : String -> DataSet -> DataSet

The ID of the X axis to plot this dataset on

setYAxisID : String -> DataSet -> DataSet

The ID of the Y axis to plot this dataset on

setSpanGaps : Bool -> DataSet -> DataSet

Whether points with no data should be filled in or not

indicatrix/elm-chartjs-webcomponent/2.0.1