** Show a line chart **

type alias Point =
  { x : Float, y : Float }


chart : Html msg
chart =
  LineChart.view1 .x .y
    [ Point 0 2, Point 5 5, Point 10 10 ]

See the full example here.

** Choosing your variables **

Notice that we provide .x and .y to specify which data we want to show. So if we had more complex data structures, like a human with an age, weight, height, and income, we can easily pick which two properties we want to plot:

chart : Html msg
chart =
  LineChart.view1 .age .weight
    [ Human  4 24 0.94     0
    , Human 25 75 1.73 25000
    , Human 43 83 1.75 40000
    ]


-- Try changing .weight to .height

See the full example here.

** Use any function to determine inputs **

Rather than using data like .weight directly, you can make a function like bmi human = human.weight / human.height ^ 2 and create a chart of .age vs bmi. This allows you to keep your data set nice and minimal!

** The whole chart is just a function **

view1 is just a function, so it will update as your data changes. If you get more data points or some data points are changed, the chart refreshes automatically!

** Show a line chart with two lines **

Say you have two humans and you would like to see how their weight relates to their age. Here's how you could plot it.

chart : Html msg
chart =
  LineChart.view2 .age .weight alice chuck

See the full example here.

** Show a line chart with three lines **

It works just like view1 and view2.

chart : Html msg
chart =
  LineChart.view3 .age .weight alice bob chuck

See the full example here.

But what if you have more people? What if you have four people?! In that case, check out view.

** Show any amount of lines **

If you want to change the color, the dot, or the title of a line, then see the line function.

chart : Html msg
chart =
  LineChart.view .age .height
    [ LineChart.line Colors.purple Dots.cross "Alice" alice
    , LineChart.line Colors.blue Dots.square "Bobby" bobby
    , LineChart.line Colors.cyan Dots.circle "Chuck" chuck
    ]

See the full example here.

See viewCustom for all other customizations.

This is the type holds the visual configuration representing a series of data.

Definition of series:

a number of events, objects, or people of a similar or related kind coming one after another.

** Examples of customizations **

See the line and dash functions for more information!

solidLine : LineChart.Series Human
solidLine =
  LineChart.line Colors.purple Dots.cross "Alice" alice




dashedLine : LineChart.Series Human
dashedLine =
  LineChart.dash Colors.purpleLight Dots.none "Average" [ 4, 2 ] average

** Customize a solid line **

Try changing the color or explore all the available dot shapes from LineChart.Dots!

chart : Html msg
chart =
  LineChart.view .age .weight
    [ LineChart.line Colors.pinkLight Dots.plus "Alice" alice
    , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby
    , LineChart.line Colors.blueLight Dots.square "Chuck" chuck
    ]

See the full example here.

** Regarding the title **

The string title will show up in the legends. If you are interested in customizing your legends, dot size or line width, check out viewCustom.

** Customize a dashed line **

Works just like line, except it takes another argument which is an array of floats describing your dashing pattern. I recommend typing in random numbers and seeing what happens, but you alternativelly you can see the SVG stroke-dasharray documentation for examples of patterns.

chart : Html msg
chart =
  LineChart.view .age .height
    [ LineChart.line Colors.pinkLight Dots.plus "Alice" alice
    , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby
    , LineChart.line Colors.blueLight Dots.square "Chuck" chuck
    , dashedLine
    ]


dashedLine : LineChart.Series Human
dashedLine =
  LineChart.dash Colors.purpleLight Dots.none "Average" [ 4, 2 ] average
  --                                                    ^^^^^^^^
  -- (Scroll to the left to see the pattern!)
  -- Try passing different numbers!

See the full example here.

** When should I use a dashed line? **

Dashed lines are especially good for visualizing processed data like averages or predicted values.

** Customize everything **

See the Config type for information about the available customizations. Or copy and play with the example below. No one will tell.

** Example customiztion **

The example below makes the line chart an area chart.

chart : Html msg
chart =
  LineChart.viewCustom chartConfig
    [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck
    , LineChart.line Colors.pinkLight Dots.plus "Alice" alice
    , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby
    ]


chartConfig : Config Info msg
chartConfig =
  { y = Axis.default 400 "Age" .age
  , x = Axis.default 700 "Weight" .weight
  , container = Container.default "line-chart-1"
  , interpolation = Interpolation.default
  , intersection = Intersection.default
  , legends = Legends.default
  , events = Events.default
  , junk = Junk.default
  , grid = Grid.default
  , area = Area.stacked 0.5 -- Changed from the default!
  , line = Line.default
  , dots = Dots.default
  }

See the full example here.

** Speaking of area charts **

Remember that area charts are for data where the area under the curve matters. Typically, this would be when you have a quantity accumulating over time. Think profit over time or velocity over time! In the case of profit over time, the area under the curve shows the total amount of money earned in that time frame. If the that total amount is not important for the relationship you're trying to visualize, it's best to leave it out!

** Available customizations **

Use with viewCustom.

• x: Customizes your horizontal axis.</br> See LineChart.Axis for more information and examples.

• y: Customizes your vertical axis.</br> See LineChart.Axis for more information and examples.

• intersection: Determines where your axes meet.</br> See LineChart.Axis.Intersection for more information and examples.

• interpolation: Customizes the curve of your LineChart.</br> See LineChart.Interpolation for more information and examples.

• container: Customizes the container of your chart.</br> See LineChart.Container for more information and examples.

• legends: Customizes your chart's legends.</br> See LineChart.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.).</br> See LineChart.Events for more information and examples.

• grid: Customizes the style of your grid.</br> See LineChart.Grid for more information and examples.

• area: Customizes the area under your line.</br> See LineChart.Area for more information and examples.

• line: Customizes your lines' width and color.</br> See LineChart.Line for more information and examples.

• dots: Customizes your dots' size and style.</br> See LineChart.Dots 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.</br> See LineChart.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 =
  { y = Axis.default 400 "Age" .age
  , x = Axis.default 700 "Weight" .weight
  , container = Container.default "line-chart-1"
  , interpolation = Interpolation.default
  , intersection = Intersection.default
  , legends = Legends.default
  , events = Events.default
  , junk = Junk.default
  , grid = Grid.default
  , area = Area.default
  , line = Line.default
  , dots = Dots.default
  }

See the full example here.