Plotly js bar graph with gradient

Question

I am trying to create a bar graph using plotly-js. Instead of showing a single color for the entire bar, is there any way to show a gradient for each bar.

[NOTE] I am not looking for colorscale, which takes all the values and then decides on the color for each bar.

In the Plotly document there is no hint that anything except for a single color can be used for bar charts. plot.ly/javascript/reference/#bar — Maximilian Peters

Naren Murali Naren Murali · Accepted Answer · 2019-02-06T06:31:01

In the plotly sample bar chart code, in the below link, shows a method to color each of the individual bars.

Customizing Individual Bar Colors

You can create a gradient using any generator website, like this

Finally implement the colors on the sample code. Please let me know if the below code helps you.

from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot
init_notebook_mode(connected=True)

trace0 = go.Bar(
    x=['Feature A', 'Feature B', 'Feature C',
       'Feature D', 'Feature E'],
    y=[20, 14, 23, 25, 22],
    marker=dict(
        color=['#051937', '#2b3953',
               '#505c70', '#78818d',
               '#a4a8ac']),
)
data = [trace0]
layout = go.Layout(
    title='Least Used Feature',
)

fig = go.Figure(data=data, layout=layout)
iplot(fig, filename='color-bar')

Plotly js bar graph with gradient

1 Answers