The Line dataset is the most general dataset - it can be used for line graphs, area charts, and even scatter plots
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_ : 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
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
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 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
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
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
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
Fill modes handle how area charts should be displayed Can be:
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
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