RadarChart

Simple chart data

type alias DatumSeries =

{ color : String

, data : List Float

}

You can have multiple "series", or polygons, on one chart. The data list should be of same size as axis labels.

Show a radar chart

view : Options -> List (LabelMaker msg) -> List DatumSeries -> Svg msg

Render a radar chart with options, labels, and some values

defaultOptions : Options

Get a default options object.

simpleLabels : List String -> List (LabelMaker msg)

Default text labels, positioned conveniently

Customize chart a bit

type alias Options =

{ maximum : Maximum

, margin : Float

, strokeWidth : Float

, axisColor : String

, axisStyle : AxisStyle

, lineStyle : LineStyle

}

Chart options:

margin Between 0 and 1, to leave some space for labels
strokeWidth For all lines, see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width
axisColor axis stroke color, any valid HTML color string (hex, color-name, rgba(...), etc.)
axisStyle see AxisStyle
lineStyle see LineStyle

type AxisStyle

= Minimal

| Web Int

Axis style:

Minimal is just a line
Web count is a web with count "divisions"

type LineStyle

= Empty

| Filled Float

The line style can be Empty (just lines) or Filled opacity (more like an area chart).

type Maximum

= FixedMax Float

| Infer

Fixed axis maximum or use highest data point of series

customLabels :

List a

-> (a -> List (Attribute msg) -> Svg msg)

-> List (LabelMaker msg)

Custom labels: use a list of anything, and a function that maps the elements together with position/alignment SVG attributes to Svg msg.

Customize chart labels completely

type alias LabelMaker msg =

Point -> TextAlign -> Svg msg

You can even completely make your own attributes and everything

type alias Point =

( Float, Float )

Point in SVG, suitable for x and y attributes of text

type alias TextAlign =

( String, String )

Text align is simply suitable values for dominant-baseline and text-anchor, respectively.

Modules

RadarChart