data-viz-lab / elm-chart-builder / Chart.Symbol

Symbols can be added to charts to improve understanding and accessibility. Currently stacked bar charts do not support symbols.

Symbols


type alias Symbol =
Chart.Internal.Symbol.Symbol

The Symbol type

circle : Symbol

A circle symbol type

symbol : Symbol
symbol =
    Symbol.circle

corner : Symbol

A corner symbol type

symbol : Symbol
symbol =
    Symbol.corner

custom : RequiredCustomConfig -> Symbol

A custom symbol type

symbol =
Symbol.custom
{ viewBoxDimensions = ( 640, 512 )
, paths = [ bicycleSymbol ]
}

triangle : Symbol

A triangle symbol type

symbol : Symbol
symbol =
    Symbol.triangle

Required Configuration for custom symbols


type alias RequiredCustomConfig =
{ viewBoxDimensions : ( Basics.Float
, Basics.Float )
, paths : List String 
}

The required configuration for the custom symbol.

viewBoxDimensions is a tuple with viewBox width and height. These values are usually copied from the 3rd and 4th arguments of the viewBox attribute on the svg icon.

paths is a list of strings for the d attribute of an svg path element.

Customisation

withGap : Basics.Bool -> Symbol -> Symbol

Sets the useGap boolean flag. It defaults to True. Only for custom symbols on bar charts, where icons are drawn with a gap from the bar rectangles. Beware that, depending on the custom icon shape and on the orientation of the chart, the icon could already have a gap and we do not want to add other space.

symbol : Bool -> Symbol -> Symbol
symbol =
    Symbol.triangle
        |> Symbol.withGap False

withIdentifier : String -> Symbol -> Symbol

Sets the symbol identifier used in the xlink:href It can be omitted if the page has only one chart.

symbol : String -> Symbol -> Symbol
symbol =
    Symbol.triangle
        |> Symbol.withIdentifier "chart-a-triangle-symbol"

withSize : Basics.Float -> Symbol -> Symbol

Sets the size of the built-in symbols It has no effect on custom symbols.

symbol : Float -> Symbol -> Symbol
symbol =
    Symbol.triangle
        |> Symbol.withSize

withStyle : List ( String, String ) -> Symbol -> Symbol

Sets additional styles to symbol The style precedence is: withStyle, withColor in the chart config, css rules. So passing a color style here will override the chart and css color rules. There is no compiler level validation here, any tuple of strings can be passed and if invalid will be ignored.

symbol : List ( String, String ) -> Symbol -> Symbol
symbol =
    Symbol.triangle
        |> Symbol.withStyle [ ( "fill", "none" ) ]