The Symbol type

A circle symbol type

symbol : Symbol
symbol =
    Symbol.circle

A corner symbol type

symbol : Symbol
symbol =
    Symbol.corner

A custom symbol type It requires a config where viewBoxDimensions is a tuple with viewBox width and height and paths is a list of strings for the d attribute of an svg path element. These values are usually copied from the 3rd and 4th arguments of the viewBox attribute on the svg icon.

symbol :
    { viewBoxDimensions : ( Float, Float )
    , paths : List String
    }
    -> Symbol
symbol =
    Symbol.custom
        { viewBoxDimensions = ( 640, 512 )
        , paths = [ bicycleSymbol ]
        }

A triangle symbol type

symbol : Symbol
symbol =
    Symbol.triangle

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

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"

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

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

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" ) ]