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.

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.

Draws a white outline around all your dots.

Adds a hover effect on the given dot!

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

See the full example here.

Adds a hover effect on several given dots!

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

See the full example here.

Change the style of all your dots.

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

See the full example here.

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.

Makes dots plain and solid.

Pass the radius.

Makes dots with a white core and a colored border.

Pass the radius and the width of the border.

Makes dots with a colored core and a white border.

Pass the radius and the width of the border.

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).