LineChart.Axis.Range

Axis ranges and data ranges

Considering the following data:

data =
  [ { x = -1, y = -2 }
  , { x = 5, y = 6 }
  ]

From this we can see that the smallest x is -1 and the largest x is 5. We call this the x-data range. By default, the axis range is the same as your data range, but we can make it far more complicated than that.

Opposite your data range which is only calculated from from your data, your axis range can be edited with this module. For example, you can make it larger than your data range, as illustrated below.

Notice how the data range begins and ends where the pink line begins and ends.

This is cool because it looks good. You can also make the axis range smaller than the data range, and the result will we a "zoomed in" view of one section of the data, which can also be useful.

Take a look at some of these functions if these effects interests you.

type alias Config =

Config

First of all, this configuration is part of the configuration in Axis.custom.

axisConfig : Axis.Config Data msg
axisConfig =
  Axis.custom
    { ..
    , range = Range.default
    , ...
    }

default : Config

Set the axis range to the full length of your data range.

rangeConfig : Range.Config
rangeConfig =
  Range.default

See the full example here.

window : Float -> Float -> Config

Straight up set your axis range by specifying the minimum and maximum, respectively.

rangeConfig : Range.Config
rangeConfig =
  Range.window -0.5 4.5

See the full example here.

padded : Float -> Float -> Config

Add a given amount of pixels to the minimum and maximum of your axis range, respectively.

rangeConfig : Range.Config
rangeConfig =
  Range.padded 40 40

See the full example here.

custom : (Range -> Range) -> Config

Given your data range, produce your desired axis range.

rangeConfig : Range.Config
rangeConfig =
  Range.custom specialRange


specialRange : Coordinate.Range -> Coordinate.Range
specialRange { min, max } =
  { min = min - 1, max = max + 2 }

See the full example here.

lauber00/line-charts/1.0.1

LineChart.Axis.Range

Axis ranges and data ranges

Modules