I need to be able to show more chart areal then is actually used for the lines/data to show a similar scale to multiple charts. So I found that I could just add a "hidden" line that spans the minimal chart range. So I choose Colors.transparent, but the Color Extra lib is not converting transparent RGB to hex correctly. (alpha is ignored)

colorToHex : Color -> String
colorToHex cl =
    let
        { red, green, blue } =
            toRgb cl
    in
        List.map toHex [ red, green, blue ]
            |> (::) "#"
            |> String.join ""

I was first thinking to make a PR there, but there is not much activity there, and I think this is the only function you use for this lib, maybe worth extracting it directly in your project?

Some of the tools have changed for elm 0.19. E.g. it's elm install instead of elm package install now.

Hi,

Is it possible to add possibility to plot multiple values from a single data type.
For example, I'm working on a toy example that shows history of git diffs over time.
Data type is as follows:

type alias Delta =
  { author : Author
  , commit : Commit
  , summary : Summary
  , time : Time
  , additions : Int
  , deletions : Int
  }

But viewCustom does not allow this to be plotted directly, it expects x and y.
So I have to first make 2 lists containing (Time, Float) for the additions and deletions.

...
chartConfig : GraphModel -> LineChart.Config (Time.Time, Int) GraphMsg
chartConfig model =
  { x = Axis.time 1270 "Time" Tuple.first
  , y = Axis.default 450 "LOC" (Tuple.second >> toFloat)
...

This is all fine for plotting, but when I try to show hover data.. most information is now lost.
I have a workaround, but it involves me keeping track of a Dict Time Delta and it's noticably slower for large repositories.

Ideally, it should be possible to have chartConfig : GraphModel -> LineChart.Config Delta GraphMsg;
giving me full access to the data.
Any chance this could be integrated into the library? Or does anyone know a better way of dealing with this kind of data?

In

When I read the docs here there is a series of </br>'s which the elm website does not interpret.

After changing Legends.default to Legends.none, there still is a space on the right that they would occupy. My intuition was that the rest of the plot should use this newly available space.

HOW TO get the examples running?

Beginner in elm: I did what is described in README:

1. cd to examples
2. elm package install

me@computer:~/prg/elm/linecharts/line-charts-2.0.1/examples$ ls
Area.elm        Container.elm  elm.json     Events3.elm  Interpolation.elm  Legends.elm  LotsOfData.elm  Simple.elm    Tooltip2.elm
Axis.elm        Docs           Events1.elm  Explanation  Intersection.elm   Line.elm     Selection1.elm  Size.elm      Tooltip3.elm
BrokenData.elm  Dots.elm       Events2.elm  Grid.elm     Junk.elm           Lines.elm    Selection2.elm  Tooltip1.elm

me@computer:~/prg/elm/linecharts/line-charts-2.0.1/examples$ elm package install
There is no package command.

Run `elm` with no arguments to get more hints.

RESULT: only a error message

3. elm install terezka/line-charts
4. elm reactor
   And click on "Area.elm"

Your elm.json says this application needs a different version of Elm.
It requires 0.19.0, but you are using 0.19.1 right now.

can lines import an external svg like d3.js ?

https://bl.ocks.org/mbostock/1014829

Hi! I loved following the progress and design ideas behind elm-plot (and I guess now lines) and I was wondering what your opinions are on using the core Elm Color type in the future.

I see your Color is currently a String alias. I would say there is a good argument to be made for leveraging a proper RGB tuple type, as well as the helper functions that come with that. Would you be open to that?

I just finished porting some very nice colormaps from matplotlib as an Elm library (https://github.com/2mol/elm-colormaps), and I think they would go very well with the opinionated curating approach that you take towards the choice of colors.

I volunteer to help with the work of course.

In order to produce effects like:

Here github's project activity charts, we have to have control of the line's/area's color a bit more.

Have you considered making the color (x,y) dependent function:

color : (Float, Float) -> Color

or maybe simply allowing a gradient between max and min of the axis.

When the page is scrolled to the top, everything works.
When I scroll a bit, the absolute position of the event-emmiting area stays the same and doesn't move with the scrolled elements.

I have only encountered this with the Events.getWithin decoder.

SSCCE

Ellie link

I've tried to port the first example from the old version to 0.19, but the hoverMany function seems to work differently from what it did back then. I would expect hoverMany to create a little box next to the cursor or the actual point in question, but instead it seems like a box is added at the bottom of the chart. The same happens if I try to use hover

Am I missing something?

I'm trying to get the chart from Example4 to work with line-charts 2.0.0 and Elm 0.19.

To do that I've had to change some dependencies, because the ones used in Example4 aren't available for Elm 0.19. Here is the commit that does that: runeksvendsen@3dc0e89

After doing this, the Junk falls below the chart:

Hi everyone,

I am very new to elm (2 days) and I see there is a new version of elm, 0.19.0, which is installed on my machine.

Now I wanted to run elm package install but the tool says that this command doesn't exist. elm install doesn't work either.

What would be the best way to build it and see the examples in elm 0.19.0? I also would like to change the READMEs if I get it work. Thanks in advance!

Best

needs description

https://github.com/terezka/line-charts/blob/1.0.0/src/LineChart/Junk.elm#L386-L405

In the code example in the doc: hovered is Maybe Data, but is used like Data (Point?)
Probably needs a Maybe.map.

The provided example doesn't seem to fully expose the api design for how this is meant to work, could you clarify this? https://github.com/terezka/lines/blob/51578a6a19dd4a389c051479305dee07442feec0/src/Lines/Dot.elm#L190-L216

When splitting lines out into a separate lib, I don't know if you are thinking of combined charts:

Like here where observations are plotted along with the distribution:

Why?
Being able to select only a subset of datapoints you want to look at in combination with automatic scaling of the y axis makes it possible to explore differences between datapoints that are very close together in comparison to other points you are not interested in.

How?
Clicking on a legend item could only select the line belonging to it.
Clicking again could deselect it.
Deselecting all items would equal selecting all items.

I am fascinated by the clarity in terms of user experience and visual representation of this package. @terezka do you think this feature can be added without compromizing on the design goals?

I would have made a pull request but I cannot find it anywhere on elm package

Hi! I'm trying to write some tests using this module and am running into some errors where the classes used on LineCharts view nodes can't be found by Test.Html.Query

I want to make some assertions that the y axis, x axis, etc have the correct titles and are visible.

module TestFake exposing (..)

import Html
import Html.Attributes
import LineChart
import LineChart.Area as Area
import LineChart.Axis as Axis
import LineChart.Axis.Intersection as Intersection
import LineChart.Axis.Line as AxisLine
import LineChart.Axis.Range as Range
import LineChart.Axis.Ticks as Ticks
import LineChart.Axis.Title as Title
import LineChart.Colors as Colors
import LineChart.Container as Container
import LineChart.Coordinate as Coordinate
import LineChart.Dots as Dots
import LineChart.Events as Events
import LineChart.Grid as Grid
import LineChart.Interpolation as Interpolation
import LineChart.Junk as Junk
import LineChart.Legends as Legends
import LineChart.Line as Line
import Loading
import Svg
import Svg.Attributes
import Test exposing (describe, test)
import Test.Html.Query as Query
import Test.Html.Selector as Selector


initChartConfig : LineChart.Config ChartData Msg
initChartConfig =
    { y =
        Axis.full 600 "Y Axis" .yAxis
    , x = Axis.full 600 "X Axis" .dataPoint
    , container = Container.default "container-id"
    , interpolation = Interpolation.default
    , intersection = Intersection.default
    , legends = Legends.default
    , events = Events.hoverOne Hover
    , junk = Junk.default
    , grid = Grid.default
    , area = Area.default
    , line = Line.default
    , dots = Dots.default
    }


type alias ChartData =
    { dataPoint : Float
    , yAxis : Float
    }


type Msg
    = Hover (Maybe ChartData)


all : Test.Test
all =
    describe "Test suite"
        [ test "chart - y axis is visible pass" <|
            \_ ->
                Html.div []
                    [ Svg.node "g"
                        [ Html.Attributes.class "chart__axis--vertical" ]
                        []
                    ]
                    |> Query.fromHtml
                    |> Query.find [ Selector.class "chart__axis--vertical" ]
                    |> Query.has [ Selector.class "chart__axis--vertical" ]
        , test "chart - y axis is visible fail" <|
            \_ ->
                LineChart.viewCustom initChartConfig
                    [ LineChart.line Colors.blue
                        Dots.diamond
                        "Name"
                        []
                    ]
                    |> Query.fromHtml
                    |> Query.find [ Selector.class "chart__axis--vertical" ]
                    |> Query.has [ Selector.class "chart__axis--vertical" ]
        ]

The first test that just creates a g node with the class name passes, but the second that creates a LineChart view fails with the following error:

 ▼ Query.find [ class "chart__axis--vertical" ]

    0 matches found for this query.


    ✗ Query.find always expects to find 1 element, but it found 0 instead.

document.querySelector('.chart__axis--vertical')

returns the correct node when I run it in my app. This may be an elm-test issue. If so, happy to close out the issue.

Thanks in advance!

Currently, not all documentation entries have Ellie links with relevant examples. It would be great if they did.

Hi again, been looking into your new lines repo. I guess the goal is to have the libs very modular. I was thinking, in my case I want to be able to switch between lines, area and histogram. In the histogram case that would be bars and not lines!

The axis and labels etc would be the same regardless of visualization.

In our case we will usually have a date time x-axis with the same ticks, positioning, labels etc. regardless of lines, area or bars.

Have you thought about moving the positioning and axis drawing code into a seperate lib?

Is this something you'd consider adding? Example below:

Maybe it's already possible, but I wasn't able to get it to work. The closest I was able to get is to set the default Dots.style to 0 and case through the time values and set the style on a specific point to be different.

At the moment the examples are not working with elm 0.19.0

I'm not sure if I overlooked the option, but it would be nice if I could specify "no title" for an axis.

Just did some sparklines to experiment with the lib.

I found that the lines get cropped when they overflow the inner rect of the chart.

Here is an example:

Notice the top and left side.

Limitations should either be named

• Extremes
• Limits

Limitations seems wrong

Using Junk.hoverMany on a line chart works fine and the vertical line and text is show. However, after the 310:th point the line still works, but the text isn't shown anymore.
Using Elm 0.19

Hi. I'm trying to make a line chart with dates, but I'm finding the behaviour of LineChart.Axis.Ticks.time and LineChart.Axis.Ticks.timeCustom unclear.

I have a chart with a line like

, ticks = Ticks.timeCustom Time.utc 3 tickTime

And the chart look like:

There is only one tick in the x axis.

If I change the line to:

, ticks = Ticks.timeCustom Time.utc 4 tickTime

I see this:

I have tried to replicate this here https://ellie-app.com/3XVkgWxJx7ra1

When

, ticks = Ticks.time Time.utc 4 

You see 2 ticks.

If you change this to:

, ticks = Ticks.time Time.utc 5

It shows 6.

Is this expected or a bug?

Thanks

Hello.

Do you have any plans for publishing this amazing library?
It'd be beneficial for everyone, since closest alternative like elm-plot is deprecated, according to readme file.

Thanks