Skip to content

torreyatcitty/charty

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

71 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

charty

Native charts library for Elm

So... you have some data you want to visualize? We can help you!

This library aims to provide native (as in "no js interop needed") SVG charts for your Elm app. Truth be told, for the moment only line and pie charts are supported. That will change soon :-)

Please check out the live demo and documentation to learn how to use it.

API overview

Usage is pretty simple. The library exposes view-only functions, so there is no need to modify your application's model to keep track of the chart's internal state (there isn't one).

For exampe, you can use LineChart.draw as follows to generate SVG markup, which can be embedded in your view function:

sampleDataset : LineChart.Dataset
sampleDataset =
    [ { label = "Series 1"
      , data = [ ( 100000, 3 ), ( 100001, 4 ), ( 100002, 3 ) ]
      }
    , { label = "Series 2"
      , data = [ ( 100000, 1 ), ( 100001, 2.5 ), ( 100002, 3 ) ]
      }
    ]


view : Model -> Html Msg
view model =
    Html.div
      []
      [ Html.p [] [ Html.text "Wow!" ]
      , LineChart.view LineChart.defaults dataset
      ]

Of course, the dataset itself can be part of your model so that the chart is redrawn every time your data changes. The examples directory shows this behaviour.

Please read the docs for detailed usage instructions of other charts too.

About

Native charts library for Elm

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Elm 100.0%