gipsy-king / radar-chart / RadarChart

Simple chart data


type alias DatumSeries =
{ color : String
, data : List Basics.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 : Basics.Float
, strokeWidth : Basics.Float
, axisColor : String
, axisStyle : AxisStyle
, lineStyle : LineStyle 
}

Chart options:


type AxisStyle
    = Minimal
    | Web Basics.Int

Axis style:


type LineStyle
    = Empty
    | Filled Basics.Float

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


type Maximum
    = FixedMax Basics.Float
    | Infer

Fixed axis maximum or use highest data point of series

customLabels : List a -> (a -> List (Svg.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 =
( Basics.Float, Basics.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.