terezka / elm-charts-alpha / BarChart

Table of contents

Quick start

Customizing everything

Quick start

view1 : (data -> String) -> (data -> Basics.Float) -> List data -> Svg msg

Show a blocks chart

type alias Facts =
  { country : String, population : Float }

chart : Html msg
chart =
  Chart.Blocks.view1 .country .population
    [ Facts "Denmark" 5748769
    , Facts "Sweden" 10142686
    , Facts "Norway" 5295619
    ]

view2 : (data -> String) -> (data -> Basics.Float) -> (data -> Basics.Float) -> List data -> Svg msg

Show a blocks chart with two series

type alias Facts =
  { country : String
  , population : Float
  , women : Float
  }

chart : Html msg
chart =
  Chart.Blocks.view1 .country .population .women
    [ Facts "Denmark" 5.7 2.9
    , Facts "Sweden" 10.1 5.0
    , Facts "Norway" 5.2 2.6
    ]

view3 : (data -> String) -> (data -> Basics.Float) -> (data -> Basics.Float) -> (data -> Basics.Float) -> List data -> Svg msg

Show a blocks chart with three series

type alias Facts =
  { country : String
  , population : Float
  , women : Float
  , children : Float
  }

chart : Html msg
chart =
  Chart.Blocks.view1 .country .population .women .children
    [ Facts "Denmark" 5.7 2.9 0.9
    , Facts "Sweden" 10.1 5.0 2.0
    , Facts "Norway" 5.2 2.6 0.8
    ]

Customizing blocks

view : (data -> String) -> List (Series data) -> List data -> Svg msg

Show any amount of lines

chart : Html msg
chart =
  Chart.Blocks.view .label [ denmark, norway, sweden, iceland ] data

denmark : Chart.Blocks.Series Data
denmark =
  Chart.Blocks.series
    { title = "Denmark"
    , style = Chart.Blocks.bordered Colors.pinkLight Colors.pink
    , variable = .denmark
    , pattern = False
    }

norway : Chart.Blocks.Series Data
norway =
  Chart.Blocks.series
    { title = "Norway"
    , style = Chart.Blocks.bordered Colors.blueLight Colors.blue
    , variable = .norway
    , pattern = False
    }

sweden : Chart.Blocks.Series Data
sweden =
  Chart.Blocks.series
    { title = "Sweden"
    , style = Chart.Blocks.bordered Colors.cyanLight Colors.cyan
    , variable = .sweden
    , pattern = False
    }

iceland : Chart.Blocks.Series Data
iceland =
  Chart.Blocks.series
    { title = "Iceland"
    , style = Chart.Blocks.bordered Colors.goldLight Colors.gold
    , variable = .iceland
    , pattern = False
    }


type alias Series data =
Internal.Block.Series data

This type represents the configuration of a series of blocks.


type alias SeriesConfig data =
{ title : String
, style : Style data
, variable : data -> Basics.Float
, pattern : Basics.Bool 
}

series : SeriesConfig data -> Series data

This is the configuration of visual properties of a series of blocks.

Examples of customizations

solidBlocks : Chart.Blocks.Series Human
solidBlocks =
  Chart.Blocks.series  Dots.cross "Alice" alice
    { title = "Total Population"
    , style = Chart.Blocks.solid Colors.purple
    , variable = .population
    , pattern = False
    }

stripedBlocks : Chart.Blocks.Series Human
stripedBlocks =
  Chart.Blocks.series
    { title = "Expected Population"
    , style = Chart.Blocks.solid Colors.purple
    , variable = .expectedPopulation
    , pattern = True -- This makes it striped!
    }


type alias Style data =
Internal.Block.Style data

The style of a block.

solid : Color -> Style data

A solid block. Pass the color.

bordered : Color -> Color -> Style data

A block with a border. Pass the main color and the border color respectively.

alternate : (Basics.Int -> data -> Basics.Bool) -> Style data -> Style data -> Style data

Change the style of the block based on the index and data.

blockStyle : Chart.Blocks.Style Data
blockStyle =
  Chart.Blocks.alternate isNumberThree
    (Chart.Blocks.solid Chart.Colors.pinkLight) -- shown when condition is false
    (Chart.Blocks.solid Chart.Colors.pink) -- shown when condition is true

isNumberThree : Int -> Data -> Bool
isNumberThree index _ =
  index == 3

isHovered : Model -> Int -> Data -> Bool
isHovered model index datum =
  datum == model.hovered

This is nice to use with Chart.Events.isSeries, Chart.Events.isDatum, and Chart.Events.isExactly when working with events. See Chart.Events for more information and examples.

See viewCustom for all other customizations.

Customizing everything

viewCustom : Config data msg -> List (Series data) -> List data -> Svg msg

Available customizations

Use with viewCustom.

Example configuration

A good start would be to copy it and play around with customizations available for each property.

chartConfig : Config Info msg
chartConfig =
  { independentAxis = Chart.Axis.Independent.default "Country" .country
  , dependentAxis = Chart.Axis.Dependent.default "GDP" Chart.Axis.Unit.dollars
  , container = Chart.Container.default "blocks-chart" 700 400
  , orientation = Chart.Orientation.default
  , legends = Chart.Legends.default
  , events = Chart.Events.default
  , grid = Chart.Grid.default
  , block = Chart.Block.default
  , junk = Chart.Junk.default
  , pattern = Chart.Pattern.default
  }


type alias Config data msg =
{ independentAxis : Chart.Axis.Independent.Config data msg
, dependentAxis : Chart.Axis.Dependent.Config msg
, container : Chart.Container.Config msg
, orientation : Chart.Orientation.Config
, legends : Chart.Legends.Config msg
, events : Chart.Events.Config Chart.Element.Block data msg
, grid : Chart.Grid.Config
, block : Chart.Block.Config
, junk : Chart.Junk.Config Chart.Element.Block msg
, pattern : Chart.Pattern.Config 
}