Comments (3)
Hi! Thanks for making me aware of this issue! It has been fix in the refactoring done for the upcoming version.
from elm-charts.
I also encountered this.
I actually think that it is the colors in the actual chart that are reversed, and not the colors in the legend. For other chart types (non-stacked bar, stacked area, line, etc), the first series/bar is purple, then pink, then light blue. Since the .x
bar is the first bar that is defined, it should be purple. The legend accurately shows it as purple, but the chart itself shows it in light blue.
I have found that specifying colors for each bar in a stacked bar does work correctly, it is only the default colors that are reversed.
EDIT: I have now done research:
I believe that this is caused by Line 170 of src/Internal/Produce.elm
, which reverses the stacks before mapping them into toSeriesItem
. I am not sure why these stacks need to be reversed at all, but I believe current behavior could be maintained (except for the default colors, which would be fixed) by using List.reverse
after the List.indexedMap
instead of before (this index is named colorIndex
, and it appears to only be used for the default colors). I am working on some local tests that I can use to confirm this before I put together a pull request.
from elm-charts.
On further research, my above belief is close but flawed. Moving the List.reverse
around inside of Line 170 will change the sectionIndex
(causing new problems) but will not fix the colorIndex
, which is applied on Line 172. Here is a larger example that includes both the colors being wrong as well as the other parts of the chart that were implicated as I tried to fix the chart colors (border rounding, tooltips, and dynamic display using Chart.amongst
):
import Browser
import Chart as C
import Chart.Attributes as CA
import Chart.Events as CE
import Chart.Item as CI
import Html as H exposing (Html)
type alias Model =
{ hovering : List (CI.One DataPoint CI.Bar) }
type Msg
= OnHover (List (CI.One DataPoint CI.Bar))
update : Msg -> Model -> Model
update msg model =
case msg of
OnHover hovering ->
{ model | hovering = hovering }
main : Program () Model Msg
main =
Browser.sandbox
{ init = init
, update = update
, view = viewChart
}
type alias DataPoint =
{ x : Float
, y : Float
, z : Float
}
chartData : List DataPoint
chartData =
[ DataPoint 1 2 3
, DataPoint 4 5 6
, DataPoint 7 8 9
]
viewChart : Model -> Html Msg
viewChart model =
C.chart
[ CA.height 300
, CA.width 400
, CE.onMouseMove OnHover (CE.getNearest CI.bars)
, CE.onMouseLeave (OnHover [])
]
[ C.legendsAt .min .max [] []
, C.bars
[ CA.roundTop 0.1
, CA.roundBottom 0.25
]
[ C.stacked
[ C.bar (.x >> (*) 2) [] |> C.named "2X"
, C.bar (.y >> (*) 2) [] |> C.named "2Y"
, C.bar (.z >> (*) 2) [] |> C.named "2Z"
]
|> C.amongst model.hovering (\datum -> [ CA.highlight 0.5 ])
, C.stacked
[ C.bar .x [] |> C.named "X"
, C.bar .y [] |> C.named "Y"
, C.bar .z [] |> C.named "Z"
]
]
chartData
, C.barLabels [ CA.moveDown 16, CA.color "white" ]
, C.each model.hovering <|
\p item ->
[ C.tooltip item [] [] [] ]
]
I am submitting a Pull Request that fixes the default coloring, but does not break tooltips, border rounding, or Chart.amongst
(according to my research and tests).
from elm-charts.
Related Issues (20)
- Are CA.centerAt and CA.orHigher meant to work together?
- Domain and Range appear to be flipped HOT 3
- Use non-deprecated version of elm-dom HOT 1
- Boxplot on roadmap?
- Candlestick Charts HOT 4
- xLabels at wrong position when displaying negative values
- Line charts printed as PDF show phantom lines when viewed in Chrome
- Is it possible to write our own custom implementation of CE.getNearest? HOT 1
- Allow use of Html.lazy / Svg.lazy?
- Custom colours HOT 1
- Help with dependancies!
- Upgrade elm-plot to 0.19.1? HOT 2
- Unable to make grid/ticks appear at 0, 6, 12, 18, 24 on graph of domain [0, 24] HOT 1
- Axis to allow custom HTML/SVG attributes
- Render legends as svg
- Feature Request : Multiple scales
- Legends do not apply color style for text
- Chart doesn't show up in Chrome w/ elm-ui
- Horizontal Bar Charts
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from elm-charts.