Plotly&Dash を使う上でよく使うテクニックをまとめました。
メインPythonで少しCSS&JavaScriptです。
※内容は随時更新していきます
散布図のカラーテーマを変更する
fig = px.scatter(
df, x="sepal_width", y="sepal_length",
color_discrete_sequence=px.colors.sequential.Viridis, // ここでテーマ設定
)
#使用できるテーマは下記で確認可能
#colorscales = px.colors.named_colorscales()
#print(colorscales)
Plotly: Built-in Color
Display Mode Bar非表示
Plotlyでグラフを表示したとき表示される、右上のアイコンバーを非表示にする。
Plotly (CSSで変更する場合)
.chart .modebar-container{
display: none;
}
DashのFigureで変更する場合
dcc.Graph(
id='graph',
config={
'displayModeBar':False,
},
figure = figure, // 各自で用意
),
JavaScriptで編集する場合
Plotly.newPlot('myDiv', data, layout, {displayModeBar: false});
Configuration Options in JavaScript
Map 右下企業情報 非表示
.chart .mapboxgl-control-container{
display: none;
}
グラフ周りのカラーを変更
外周エリアの白色部分とセンターのグレーカラーを透過させる。
fig.update_layout(
paper_bgcolor='rgba(0,0,0,0)', # legend and axis transparent
plot_bgcolor='rgba(0,0,0,0)', # graph area transparent
)
グラフのMargin, Padding調整
下記はMarginとPaddingを0にするコード。
fig.update_layout(
margin = dict(l=0, r=0, b=0, t=0, pad=0),
)
Plotly レスポンシブ対応
Responsive / Fluid Layouts in JavaScript
↧