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
]
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
}
Internal.Block.Series data
This type represents the configuration of a series of blocks.
{ 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!
}
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.
viewCustom : Config data msg -> List (Series data) -> List data -> Svg msg
Available customizations
Use with viewCustom
.
x: Customizes your independent axis.
See Chart.Axis.Independent
for more information and examples.
y: Customizes your dependent axis.
See Chart.Axis.Dependent
for more information and examples.
container: Customizes the container of your chart.
See Chart.Container
for more information and examples.
legends: Customizes your chart's legends.
See Chart.Legends
for more information and examples.
events: Customizes your chart's events, allowing you to easily
make your chart interactive (adding tooltips, selection states etc.).
See Chart.Events
for more information and examples.
grid: Customizes the style of your grid.
See Chart.Grid
for more information and examples.
block: Customizes your block width and corner radius.
See Chart.Block
for more information and examples.
pattern: Customizes your blocks pattern.
See Chart.Pattern
for more information and examples.
junk: Gets its name from
Edward Tufte's concept of "chart junk".
Here you are finally allowed set your creativity loose and add whatever
SVG or HTML fun you can imagine.
See Chart.Junk
for more information and examples.
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
}
{ 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
}