To resize and make the Violin chart of PotlyJS responsive

Question

I want the violin chart (I'm using plotlyjs library) to be responsive. But also don't want it to compress so much (it is compressing according to the div it is kept in). I have tried to turn the autosize property of violin to be false and then set the height and width. In this case the chart does not compress (stays the way I want it to be), but it loses its responsiveness. Is there a way to make this chart responsive yet no so compressed? Here is my code:

<Plot
        config = {{ displayModeBar: false }}
        data={[
          {
            type: 'violin',
            y: this.props.data,
            points: 'none',
            box: {
              visible: true
            },
            boxpoints: false,
            line: {
              color: 'red'
            },
           opacity: 0.6,
            meanline: {
              visible: true
            },
            x0: "OEE"
          }
        ]}
        layout={{
          title: "Comparison",
          yaxis: {
          zeroline: false
              },
              // autosize: false,
          // height: 300,
          // width: 500,
          // responsive: true
        }}
        useResizeHandler= {true}
        style= {{width: "100%", height: "100%"}}
      />

The div inside which violin is kept:

<div className="chart-wrapper" style={{ height: "35vh" }}>
   <ViolinChart data={this.state.violinChartData} /> 
</div>

score 0 · Accepted Answer · answered Apr 27 '20 at 05:54

I got the solution to the above question. PlotlyJS also provides a "margin" property for its charts. So providing margins will let you adjust the chart the way you want it to be

var layout = {
  margin: {
    l: 25,
    r: 25,
    b: 25,
    t: 25
  }
};

This is what i added to my code. Setting automargin = true will automatically increase the margin size.

More about this can be found here.

To resize and make the Violin chart of PotlyJS responsive

1 Answers1