react-plotly.js icon indicating copy to clipboard operation
react-plotly.js copied to clipboard

How to change marker color for only some values in line graph?

Open harikrishnanp opened this issue 6 years ago • 3 comments

I'm using the following code to create a line graph with markers. I'm able to customize markers with marker prop. But how can I dynamically change with respect to the value plotted? Please advice.

Eg: Value 8 will have different marker.

Screen Shot 2019-05-21 at 3 57 59 PM

Code:

<Plot
        data={[
          {
            x: [1, 2, 3, 4],
            y: [3, 5, 8, 5],
            type: 'scatter',
            mode: 'lines+markers',
            marker: {color: 'red'},
          },
        ]}
        layout={{width: 320, height: 240, title: 'A Fancy Plot'}}
/>

harikrishnanp avatar May 21 '19 10:05 harikrishnanp

Instead of marker: {color: 'red'} you can provide an array of colors like marker: {color: ['red', 'red', 'blue', 'red']} :)

nicolaskruchten avatar May 21 '19 13:05 nicolaskruchten

@nicolaskruchten - I'm using the following function to add points dynamically. How I can add different colour to points dynamically?

Plotly.extendTraces('graph', {
    y: [[rand()], [rand()], [rand()]]
}, [0, 1, 2])

Thanks.

@UnnikrishnanBhargavakurup did you find sol?

elquimista avatar Jan 09 '21 15:01 elquimista