Ploty line , date order changes when color parameter set

Hi, I have a dataframe with columns: date, y1, p1 . p1 is based on y1, it is a determination of y1’s direction (if y1 is going up, down or sideways). When I plot fig=px.line(df, x=‘Date’,y=‘p1’), I get a normal one color chart.

When I try fig=px.line(df, x=‘Date’,y=‘y1’,facet_col=‘p1’) or fig=px.line(df, x=‘Date’,y=‘t1’,color=‘t1dr’) it subdivides the chart into three different regions based on ‘p1’. This messes up the date order.

I want the date order to remain the same just the color to change to see how well my determination of y1’s direction is, is this possible

I posted this up on stackoverflow and got one answer, but it did not solve the problem. I’ll try a bar chart, maybe it will work on that. Tradingview support color changing bar charts for sure and possibly single line changing color charts.

Hi @newoptionz !
Welcome on the Plotly Forum! :tada:

Your issue is not straightforward :thinking:

But first, to understand what is happening with your plots using px.line:

  • px.line(df, x="Date", y="y1") will give you a regular line plot using one trace
  • adding facet_col="p1" or color="p1" will split your data depending on p1 values, meaning if p1 can have -1, 0, 1 as value you will have 3 traces.

Taking your example:

data = {
    "date": ['2021/01/07', '2021/01/08', '2021/01/11', '2021/01/12', '2021/01/13', '2021/01/14', '2021/01/15'],
    "y1": [2, 4, 6, 6, 4, 2, 2],
    "p1": [0, 1, 1, 0, -1, -1, 0]

You will have the traces:

#corresponding to p1=0
trace1 = {
    "date": ['2021/01/07', '2021/01/12', '2021/01/15'],
    "y1": [2, 6, 2],
#corresponding to p1=1
trace2 = {
    "date": ['2021/01/08', '2021/01/11'],
    "y1": [4, 6],
#corresponding to p1=-1
trace3 = {
    "date": ['2021/01/13', '2021/01/14'],
    "y1": [ 4, 2],

As a result, you will have:

That being said, those splits doesn’t connect the right points, you have to create the dataset with the points you want to connect for each trace.
As in your example, the traces are discontinuous, you mus insert None to not draw the line where it is discontinuous.
The easiest way is like having the same dataset for each trace and replace by None the points you don’t want for the current trace.
For example for the trace on flat part you will have the dataset:

trace1 = {
    "date": [None, None, '2021/01/11', '2021/01/12', None, '2021/01/14', '2021/01/15'],
    "y1": [None, None, 6, 6, None, 2, 2],

Here one way to do it:

import plotly.graph_objects as go
from datetime import datetime

data = {
    "date": ['2021/01/07', '2021/01/08', '2021/01/11', '2021/01/12', '2021/01/13', '2021/01/14', '2021/01/15'],
    "y1": [2, 4, 6, 6, 4, 2, 2],

data['date'] = [datetime.strptime(date, '%Y/%m/%d') for date in data['date']]

traces = {
    'up': {'x': [None], 'y': [None], 'color': 'green'},
    'down': {'x': [None], 'y': [None], 'color': 'red'},
    'flat': {'x': [None], 'y': [None], 'color': 'blue'},

for i in range(len(data['date']) - 1):
    delta = data['y1'][i + 1] - data['y1'][i]
    trend = 'up' if delta > 0 else 'down' if delta < 0 else 'flat'

    for trace in traces:
        if trace == trend and traces[trace]['x'][i] is None:
            # add the last point if it was None to draw the line
            traces[trace]['x'][i] = data['date'][i]
            traces[trace]['y'][i] = data['y1'][i]

        traces[trace]['x'].append(data['date'][i + 1] if trace == trend else None)
        traces[trace]['y'].append(data['y1'][i + 1] if trace == trend else None)

fig = go.Figure()
for trace in traces:
        mode='lines', name=trace,
        x=traces[trace]['x'], y=traces[trace]['y'],