Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Change line colors ?
See original GitHub issueHello,
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 😃
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:11 (6 by maintainers)
Top Results From Across the Web
Change the color, style, or weight of a line in Word for Mac
Change line color Click the line that you want to change, and then click the Format tab. , and then click the...
Read more >How to Change Line Color in Photoshop - PhotoshopBuzz
Simply click and drag to draw a line. In the Properties panel, click on the ...
Read more >Control How Plotting Functions Select Colors and Line Styles
You can change the colors, line styles, and markers of plot objects by modifying the ColorOrder or LineStyleOrder properties of the axes, or...
Read more >How Do You Change the Color of a Line in Photoshop?
One way is to use the “Edit” menu. Under “Edit,” there is an option for ” colors.” You can use this option to...
Read more >How to Change Line Colors in ggplot2 (With Examples)
This tutorial explains how to change line color in plots created by ggplot2, including examples.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@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
Yes, it’s hidden in the dropdown of the Line chart demo, you can add:
you can see it in action on https://nivo.rocks/line in the
Styletab.