Hello,
First thx for the amazing work, this lib is awesome !
I just started and struggling with something that should be easy: I would like to simply change lines colors of a ResponsiveLine component, maybe I'm missing something...
Here is some code:
<ResponsiveLine
data={[
{
"id": "Bureautique",
"color": "hsl(54,78%,72%)",
"data": [
{
"x": "02/07",
"y": 12
},
{
"x": "09/07",
"y": 10
},
{
"x": "16/07",
"y": 11
},
{
"x": "23/07",
"y": 14
},
{
"x": "30/07",
"y": 18
},
{
"x": "06/08",
"y": 20
},
{
"x": "13/08",
"y": 27
}
]
},
{
"id": "PDA",
"color": "hsl(12,100%,46%)",
"data": [
{
"x": "02/07",
"y": 65
},
{
"x": "09/07",
"y": 62
},
{
"x": "16/07",
"y": 52
},
{
"x": "23/07",
"y": 34
},
{
"x": "30/07",
"y": 24
},
{
"x": "06/08",
"y": 18
},
{
"x": "13/08",
"y": 12
}
]
},
]}
margin={{
"top": 15,
"right": 55,
"bottom": 120,
"left": 25
}}
xScale={{
"type": "point"
}}
yScale={{
"type": "linear",
"stacked": false,
"min": "0",
"max": "100"
}}
curve="natural"
axisTop={null}
axisRight={{
"orient": "right",
"tickSize": 5,
"tickPadding": 5,
"tickRotation": 0,
"legend": "",
"legendOffset": 0,
"tickValues": [0, 25, 50, 75, 100]
}}
axisBottom={{
"orient": "bottom",
"tickSize": 5,
"tickPadding": 5,
"tickRotation": 0,
"legend": "transportation",
"legendOffset": 36,
"legendPosition": "middle"
}}
axisLeft={null}
enableGridX={false}
enableDots={false}
dotSize={10}
dotBorderWidth={2}
dotBorderColor="#ffffff"
enableDotLabel={true}
dotLabelYOffset={-12}
animate={true}
motionStiffness={100}
motionDamping={15}
legends={[
{
"anchor": "bottom",
"direction": "row",
"justify": false,
"translateX": 20,
"translateY": 92,
"itemsSpacing": 0,
"itemDirection": "left-to-right",
"itemWidth": 105,
"itemHeight": 20,
"itemOpacity": 0.75,
"symbolSize": 12,
"symbolShape": "circle",
"symbolBorderColor": "rgba(0, 0, 0, .5)",
"effects": [
{
"on": "hover",
"style": {
"itemBackground": "rgba(0, 0, 0, .03)",
"itemOpacity": 1
}
}
]
}
]}
/>
I assumed the colors provide in data should do the work, but its keep being overrides by default theme :/
(I didn't find anything about it in the doc or google, so I must missing something very obvious maybe, sorry had a long day...)
Thx for help :)
tinuts
All 10 comments
Yes, it's hidden in the dropdown of the Line chart demo, you can add:
<ResponsiveLine
/* … */
colorBy={d => d.color}
/>
you can see it in action on https://nivo.rocks/line in the Style tab.
plouc
on 4 Mar 2019
@plouc I cannot manage to get working this using colorBy. I went through the code and I cannot see that there is colorBy passed to the line. I will investigate what it's the reason but I feel that it will be good to reopen the issue
EduardoAC
on 6 Jun 2019
@EduardoAC the solution was valid at that time, but now you should pass this to colors instead of colorsBy.
plouc
on 6 Jun 2019
Could you provide an example of the new format? Currently, I don't manage to get it working at all with
colors= {['#262f3a']}
or
colors="#262f3a"
For the record I tried the https://nivo.rocks/guides/colors without any luck for the line chart. I am currently looking through the code to find the right color format
EduardoAC
on 6 Jun 2019
@plouc Solved you need to add colors={{ datum: 'color' }}. Are you sure the documentation is correct for the https://nivo.rocks/guides/colors? I am happy to create a pull request for the docs if Using a static custom color is mistaken
As well, datum for the property name is a bit....
EduardoAC
on 6 Jun 2019
Hi so in summary how do we pass our own color palette? https://nivo.rocks/guides/colors doesn't mention that. When you say datum what do you mean, the key of our data? If so how do the existing schemes do colors in a generic way?
DominicTobias
on 11 Sep 2019
@DominicTobias for me what ended up working was passing in an array of colours that was in the same order as the data array
data={ [{id: 'foo', data: lineData}]} colors={['#ff3344']}
That applied the colours as I needed them for my graphs
Blerd
on 14 Oct 2019
Hello, I'm new to nivo charts, I'm currently implementing a pie chart in my project, but why the default color scheme only shows one color instead of various color in the specific scheme? What am I missing?
<ResponsivePie
data={pieData.data}
colors={{ scheme: 'reds' }}
margin={{top: 10, right: 10, bottom: 10, left: 10}}
borderColor={{ from: 'color', modifiers: [[ 'darker', 0.2 ]] }}
/>
Novizh
on 5 Nov 2019
@Novizh, I don't know what pieData.data contains, but if you have a look at https://nivo.rocks/pie, you'll see that you get different colors when using the reds color scheme. Can you reproduce this on codesandbox for example?
plouc
on 5 Nov 2019
Thanks for the hint @plouc, I figured out that the data inside the pieData.data only have a label prop instead of an id, Nivo charts need an id to differentiate each data.
I had to manipulate pieData to have an id prop with the same values as label.
dashboard.pie.map(item => {
let pieData = item.data.map(item => ({
...item, id: item.label
}))
Now the color scheme works as it should.
Novizh
on 14 Nov 2019
Related issues
luisrudge
·
3Comments
zhe1ka
·
3Comments
Haaziq-Uvais
·
3Comments
pratikguru
·
3Comments
knackjax
·
3Comments
Most helpful comment
@DominicTobias for me what ended up working was passing in an array of colours that was in the same order as the data array
data={ [{id: 'foo', data: lineData}]} colors={['#ff3344']}That applied the colours as I needed them for my graphs