Change line colors ?

[tinuts]

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 :)

[plouc]

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.

[EduardoAC]

@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

[plouc]

@EduardoAC the solution was valid at that time, but now you should pass this to colors instead of colorsBy.

[EduardoAC]

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]

@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....

[sekoyo]

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?

[Blerd]

@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

[Novizh]

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 ]] }} />

[plouc]

@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?

[Novizh]

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.

[TechSaq]

Passing color like this colors={() => '#ff0000'} worked for me in ResponsiveLine Chart.

[Znoy108x]

@plouc how can we change node color suppose if i have a blue line then i want its node color to be light blue and if i have a red line then i want its node color to be light red

[alinarte7]

@DominicTobiaspara mí, lo que terminó funcionando fue pasar una matriz de colores que estaba en el mismo orden que la matriz de datos data={ [{id: 'foo', data: lineData}]} colors={['#ff3344']}

Eso aplicó los colores como los necesitaba para mis gráficos.

How did you do it, could you be more explicit? Beforehand thank you very much