<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
var traces = [];
traces.push({
  x: [['Model1', 'Model1', 'Model1'],
     ["v1", "v2", "v3"]],
  y: [20, 14, 23],
  name: 'Model1',
  type: 'bar',
  marker: {color: '#448'},
  textposition: "auto"
  // width: 0.2
});

traces.push({
  x: [['Model2', 'Model2', 'Model2'],
     ["v1", "v2", "v3"]],
  y: [12, 18, 29],
  name: 'Model2',
  type: 'bar',
  // width: 0.2
});

var data = traces;

var layout = {
              barmode: 'group',     
              // bargap: 0.1,
              // bargroupgap: 0.5
              xaxis: {
                        title: "Model Instance",
                        automargin: true,
                        tickangle: -45,
                        textangle: -45
                    },
             };

Plotly.newPlot('myDiv', data, layout);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.