peterszerzo / line-charts / LineChart.Dots

Shapes


type alias Shape =
Internal.Dots.Shape

Change the shape of your dots

The shape type changes the shape of your dots.

humanChart : Html msg
humanChart =
    LineChart.view .age
        .income
        [ LineChart.line Colors.gold Dots.circle "Alice" alice

        --                           ^^^^^^^^^^^
        , LineChart.line Colors.blue Dots.square "Bobby" bobby

        --                           ^^^^^^^^^^^
        , LineChart.line Colors.pink Dots.diamond "Chuck" chuck

        --                           ^^^^^^^^^^^^
        ]

See the full example here.

What is a dot?

Dots denote where your data points are on your line. They can be different shapes (circle, square, etc.) for each line.

Selection

Hopefully, these are self-explanatory. Legends

none : Shape

circle : Shape

triangle : Shape

square : Shape

diamond : Shape

plus : Shape

cross : Shape

Styles


type alias Config data =
Internal.Dots.Config data

Change the style of your dots

Use in the LineChart.Config passed to LineChart.viewCustom.

chartConfig : LineChart.Config Data Msg
chartConfig =
  { ...
  , dots = Dots.default
  , ...
  }

What is a dot style?

The style of the dot includes the size of the dot and various other qualities like whether it has a border or not. See your options under Styles.

default : Config data

Draws a white outline around all your dots.

Hover styles

hoverOne : Maybe data -> Config data

Adds a hover effect on the given dot!

dotsConfig : Maybe Data -> Dots.Config Data
dotsConfig hovered =
    Dots.hoverOne hovered

See the full example here.

hoverMany : List data -> Config data

Adds a hover effect on several given dots!

dotsConfig : List Data -> Dots.Config Data
dotsConfig hovered =
    Dots.hoverMany hovered

See the full example here.

Customization

custom : Style -> Config data

Change the style of all your dots.

dotsConfig : Dots.Config Data
dotsConfig =
    Dots.custom (Dots.full 5)

See the full example here.

customAny : { legend : List data -> Style, individual : data -> Style } -> Config data

Change the style of any of your dots. Particularly useful for hover states, but it can also be used for creating another dimension for your chart by varying the size of your dots based on some property.

Extra dimension example

customDotsConfig : Dots.Config Data
customDotsConfig =
    let
        styleLegend _ =
            Dots.full 7

        styleIndividual datum =
            Dots.full <| (datum.height - 1) * 12
    in
    Dots.customAny
        { legend = styleLegend
        , individual = styleIndividual
        }

See the full example here.

Hover state example

customDotsConfig : Maybe Data -> Dots.Config Data
customDotsConfig maybeHovered =
    let
        styleLegend _ =
            Dots.disconnected 10 2

        styleIndividual datum =
            if Just datum == maybeHovered then
                Dots.empty 8 2

            else
                Dots.disconnected 10 2
    in
    Dots.customAny
        { legend = styleLegend
        , individual = styleIndividual
        }

See the full example here.

Selection


type alias Style =
Internal.Dots.Style

full : Basics.Float -> Style

Makes dots plain and solid.

Pass the radius.

Legends

empty : Basics.Float -> Basics.Int -> Style

Makes dots with a white core and a colored border.

Pass the radius and the width of the border.

Legends

disconnected : Basics.Float -> Basics.Int -> Style

Makes dots with a colored core and a white border.

Pass the radius and the width of the border.

Legends

aura : Basics.Float -> Basics.Int -> Basics.Float -> Style

Makes dots with a colored core and a less colored, transparent "aura".

Pass the radius, the width of the aura, and the opacity of the aura (A number between 0 and 1).

Legends