JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 480px; height: 400px;"></div>

<div id="myDiv2" style="width: 480px; height: 400px;"></div>

JavaScript

Plotly.plot(myDiv, [{
  x: [1, 2, 3, 4, 5],
  y: [1, 2, 4, 8, 9],
  line: {
    shape: "spline",
    color: "transparent"
  }
}, {
  x: [1, 2, 3, 4, 5],
  y: [2, 3, 6, 9, 11],
  line: {
    shape: "spline",
    color: "transparent"
  },
  fill: "tonexty",
  fillColor: "rgba(0,0,0,0.3)",
}, {
  x: [1, 2, 3, 4, 5],
  y: [0, 1, 2, 1, 5],
  mode: "lines",
  line: {
    dash: "dash",
    shape: "spline",
    color: "black"
  }
}, {
  x: [1, 2, 3, 4, 5],
  y: [4, 4, 6, 10, 13],
  mode: "lines",
  line: {
    dash: "dash",
    shape: "spline",
    color: "black"
  }
}], {
  showlegend: false,
  margin: {t: 40, r: 40},
  xaxis: {
    title: "time of day"
  },
  yaxis: {
    title: "No. of trips started"
  }
}, {
  displayModeBar: false,
  staticPlot: true
});


var data = [{
  values: [79, 21],
  labels: ['score', ''],
  type: 'pie',
  hole: 0.8,
  textinfo:'none',
  'marker': {'colors': ['blue','transparent']},
  hoverinfo: "none"
}];

var layout = {
  annotations: [
    {
      text: "79%<br>Driver Score",
      showarrow: false,
      font: {
        size: 18
      }
    }
  ],
  showlegend: false,
  margin: {
    t: 0, r: 0, b: 0, l: 0
  }
};

Plotly.newPlot('myDiv2', data, layout, {staticPlot:true});