indicatrix / elm-chartjs-webcomponent / Chartjs.DataSets.Line

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


type DataPoints
    = Numbers (List Basics.Float)
    | Points (List ( Basics.Float, Basics.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 Basics.Bool
, order : Maybe Basics.Int
, indexAxis : Maybe Chartjs.Common.IndexAxis
, xAxisID : Maybe String
, yAxisID : Maybe String
, backgroundColor : Maybe (Chartjs.Common.PointProperty Color)
, borderColor : Maybe (Chartjs.Common.PointProperty Color)
, borderWidth : Maybe (Chartjs.Common.PointProperty Basics.Float)
, borderDash : Maybe (Chartjs.Common.PointProperty Basics.Float)
, borderDashOffset : Maybe Basics.Float
, borderCapStyle : Maybe String
, borderJoinStyle : Maybe String
, cubicInterpolationMode : Maybe String
, fill : Maybe FillMode
, lineTension : Maybe Basics.Float
, pointBackgroundColor : Maybe (Chartjs.Common.PointProperty Color)
, pointBorderColor : Maybe (Chartjs.Common.PointProperty Color)
, pointBorderWidth : Maybe (Chartjs.Common.PointProperty Basics.Float)
, pointRadius : Maybe (Chartjs.Common.PointProperty Basics.Float)
, pointStyle : Maybe (Chartjs.Common.PointProperty Chartjs.Common.PointStyle)
, pointRotation : Maybe (Chartjs.Common.PointProperty Basics.Float)
, pointHitRadius : Maybe (Chartjs.Common.PointProperty Basics.Float)
, pointHoverBackgroundColor : Maybe (Chartjs.Common.PointProperty Color)
, pointHoverBorderColor : Maybe (Chartjs.Common.PointProperty Color)
, pointHoverBorderWidth : Maybe (Chartjs.Common.PointProperty Basics.Float)
, pointHoverRadius : Maybe (Chartjs.Common.PointProperty Basics.Float)
, showLine : Maybe Basics.Bool
, spanGaps : Maybe Basics.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 Basics.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 ( Basics.Float, Basics.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 : Basics.Bool -> DataSet -> DataSet

Set whether this dataset should be hidden from the chart

setOrder : Basics.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 Basics.Float -> DataSet

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

setBorderColor : Chartjs.Common.PointProperty Color -> DataSet -> DataSet

Color of the line

setBorderWidth : Chartjs.Common.PointProperty Basics.Float -> DataSet -> DataSet

Line width (in pixels)

setBorderDash : Chartjs.Common.PointProperty Basics.Float -> DataSet -> DataSet

Length and spacing of line dashes

setBorderDashOffset : Basics.Float -> DataSet -> DataSet

Offset for line dashes

setBorderCapStyle : String -> DataSet -> DataSet

Cap style of the line

setShowLine : Basics.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 : Basics.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 Basics.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 ( Basics.Float, Basics.Float ) -> DataSet

Create a Line dataset with a label and points list

setPointBackgroundColor : Chartjs.Common.PointProperty Color -> DataSet -> DataSet

Fill color for points

setPointBorderColor : Chartjs.Common.PointProperty Color -> DataSet -> DataSet

Border color for points

setPointBorderWidth : Chartjs.Common.PointProperty Basics.Float -> DataSet -> DataSet

Border width (in pixels) for points

setPointRadius : Chartjs.Common.PointProperty Basics.Float -> DataSet -> DataSet

Radius of the point shape

setPointStyle : Chartjs.Common.PointProperty Chartjs.Common.PointStyle -> DataSet -> DataSet

Style of the point

setPointHitRadius : Chartjs.Common.PointProperty Basics.Float -> DataSet -> DataSet

Hit radius for point interactivity

setPointHoverBackgroundColor : Chartjs.Common.PointProperty Color -> DataSet -> DataSet

Fill color for points when hovered

setPointHoverBorderColor : Chartjs.Common.PointProperty Color -> DataSet -> DataSet

Border color for points when hovered

setPointHoverBorderWidth : Chartjs.Common.PointProperty Basics.Float -> DataSet -> DataSet

Border width for points when hovered

setPointHoverRadius : Chartjs.Common.PointProperty Basics.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 Basics.Int
    | Relative Basics.Int
    | Boundary FillBoundary
    | Disabled

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


type FillBoundary
    = Start
    | End
    | Origin

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

setBackgroundColor : Chartjs.Common.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 : Chartjs.Common.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 : Basics.Bool -> DataSet -> DataSet

Whether points with no data should be filled in or not