如何修改Dash图表的系列颜色？新手技术咨询

Hey there! Great job getting your user-bot engagement chart up and running on your site—customizing those default blue/orange colors is totally achievable, even if it’s not front-and-center in the docs. Let me break down two straightforward ways to set your own custom hues:

Option 1: Set Colors Per Individual Trace #

If you want fine-grained control over each bar series, you can add a color parameter directly to each data trace in your figure. Just pick your preferred hex codes (or named colors like 'darkred') and plug them in:

dcc.Graph(
    id='average_engagement_graph',
    figure={
        'data': [
            {
                'x': list(avg_df['day']),
                'y': list(avg_df['countMessageIn']),
                'type': 'bar',
                'name': 'Incoming Messages from Users',
                'color': '#2ecc71'  # Custom green for incoming messages
            },
            {
                'x': list(avg_df['day']),
                'y': list(avg_df['countMessageOut']),
                'type': 'bar',
                'name': 'Outgoing Message by Bot',
                'color': '#3498db'  # Custom blue for bot messages
            },
        ],
        'layout': {
            'title': 'Average User-Bot Engagement by Day of Week',
            'xaxis': {
                'title': 'Day of the Week'
            },
            'yaxis': {
                'title': 'Average Number of Messages'
            },
        }
    }
),

Option 2: Use a Global Color Palette (Colorway) #

If you plan to add more series later and want a consistent color scheme across all traces, use the colorway property in your layout. This lets you define a list of colors that Dash will cycle through for each new series:

dcc.Graph(
    id='average_engagement_graph',
    figure={
        'data': [
            {
                'x': list(avg_df['day']),
                'y': list(avg_df['countMessageIn']),
                'type': 'bar',
                'name': 'Incoming Messages from Users'
            },
            {
                'x': list(avg_df['day']),
                'y': list(avg_df['countMessageOut']),
                'type': 'bar',
                'name': 'Outgoing Message by Bot'
            },
        ],
        'layout': {
            'title': 'Average User-Bot Engagement by Day of Week',
            'xaxis': {
                'title': 'Day of the Week'
            },
            'yaxis': {
                'title': 'Average Number of Messages'
            },
            'colorway': ['#e74c3c', '#f39c12']  # Custom red and orange palette
        }
    }
),

Pro Tip #

You can use any valid CSS color format here—hex codes, RGB/RGBA values, or even named colors like 'purple' or 'teal'. Just make sure the colors have enough contrast so your chart stays readable!

内容的提问来源于stack exchange，提问作者tansawit