NOTE: the latest version is 3.0.0

README About Versions Source Modules

Chartjs.DataSets.Line

A line chart plots data points on a line. Often used to show trend data or compare data sets.

This dataset class can handle categorical scatter charts and area charts as well as standard line charts. For categorical scatter charts, set showLine to be False For area datasets, ensure that the fill mode is enabled and a background color is set

type alias DataSet =

{ label : String

, data : List Float

, 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

You should not use the dataset type directly Instead use the updater pipeline functions:

defaultBarFromLabel "Example"
    |> setBackgroundColor (Common.All Color.red)
    |> setBorderColor (Common.All Color.white)
    |> setBorderCapStyle "round"
    |> setFill Disabled

defaultLineFromLabel : String -> DataSet

Create a Line dataset with just a label

defaultLineFromData : String -> List Float -> DataSet

Create a Line dataset with a label and data

type SteppedLine

= NoInterpolation

| BeforeInterpolation

| AfterInterpolation

Step Interpolation for lines

BeforeInterpolation: Step-before Interpolation AfterInterpolation: Step-after Interpolation

= 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

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

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

setBackgroundColor : PointProperty Color -> DataSet -> DataSet

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

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

setCubicInterpolationMode : String -> DataSet -> DataSet

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

setFill : FillMode -> DataSet -> DataSet

How to fill the area under the line

setLineTension : Float -> DataSet -> DataSet

Beizer curve tension 0 is straight lines

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

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)

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

setShowLine : Bool -> DataSet -> DataSet

Whether the line for this dataset should be drawn

setSpanGaps : Bool -> DataSet -> DataSet

Whether points with no data should be filled in or not

setSteppedLine : SteppedLine -> DataSet -> DataSet

Set the step interpolation for the line

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

Modules