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.
Hopefully, these are self-explanatory.
none : Shape
circle : Shape
triangle : Shape
square : Shape
diamond : Shape
plus : Shape
cross : Shape
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.
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.
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.
Internal.Dots.Style
full : Basics.Float -> Style
Makes dots plain and solid.
Pass the radius.
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.
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.
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).