如何修改PlotlyJS模式栏的竖向方向及右侧显示位置？

要实现模式栏（Modebar）竖向布局并置于图表右侧，只需在config对象中添加关键配置项，同时可按需调整布局边距避免内容重叠：

1. 核心配置修改（config 对象） #

在现有config中新增两个属性：

• modeBarOrientation: 'vertical'：将模式栏从默认横向改为竖向排列
• modeBarPosition: 'right'：将模式栏定位到图表右侧区域

2. 可选：调整布局边距（layout 对象） #

如果模式栏与图表内容出现重叠，可在layout中添加margin配置，给右侧留出足够空间：

margin: { right: 80 } // 根据实际需求调整数值

修改后的完整代码 #

let layout = {
    xaxis: {
        title: 'Date',
        tickfont: {
            size: 10,
        },
    },
    yaxis: {
        title: '価格 ($)',
        tickfont: {
            size: 10,
        },
        range: [minValue, maxValue],
    },
    legend: {
        x: -0.05,
        y: 1.2,
        itemwidth: 30,
        traceorder: 'normal',
        orientation: 'h',
        font: {
            size: 12,
            color: '#000',
        },
    },
    margin: { right: 80 } // 可选：避免模式栏与图表内容重叠
};

let config = {
    responsive: true,
    scrollZoom: true,
    displaylogo: false,
    modeBarOrientation: 'vertical', // 设置竖向布局
    modeBarPosition: 'right' // 设置到右侧位置
};

Plotly.newPlot('model_graph', all_traces, layout, config);

配置说明 #

• modeBarOrientation支持'horizontal'（默认）和'vertical'两个取值，对应横向/竖向排列
• modeBarPosition支持'top'、'top right'（默认）、'right'、'bottom right'等多个取值，可精准控制模式栏位置

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