plotly

xyz

{
  "data": [
    {
      "x": [1, 2, 3, 4, 5],
      "y": [1, 6, 3, 6, 1],
      "mode": "markers+text",
      "type": "scatter",
      "name": "Team A",
      "text": ["A-1", "A-2", "A-3", "A-4", "A-5"],
      "textposition": "top center",
      "textfont": {
        "family":  "Raleway, sans-serif"
      },
      "marker": { "size": 12 }
    },
    {
    "x": [1.5, 2.5, 3.5, 4.5, 5.5],
    "y": [4, 1, 7, 1, 4],
    "mode": "markers+text",
    "type": "scatter",
    "name": "Team B",
    "text": ["B-a", "B-b", "B-c", "B-d", "B-e"],
    "textfont": {
      "family": "Times New Roman"
    },
    "textposition": "bottom center",
    "marker": { "size": 12 }
    }
  ],
  "layout": {
    "xaxis": {
      "range": [ 0.75, 5.25 ]
    },
    "yaxis": {
      "range": [0, 8]
    },
    "legend": {
      "y": 0.5,
      "yref": "paper",
      "font": {
        "family": "Arial, sans-serif",
        "size": 20,
        "color": "grey",
      }
    },
    title: "Data Labels on the Plot"
  }
}

trace1 = {
  line: {shape: 'linear'}, 
  mode: 'lines+markers', 
  name: ''linear'', 
  type: 'scatter', 
  x: [1, 2, 3, 4, 5], 
  y: [1, 3, 2, 3, 1], 
  hoverinfo: 'name'
};
trace2 = {
  line: {shape: 'spline'}, 
  mode: 'lines+markers', 
  name: ''spline'', 
  type: 'scatter', 
  x: [1, 2, 3, 4, 5], 
  y: [6, 8, 7, 8, 6], 
  text: ['tweak line smoothness<br>with 'smoothing' in line object'], 
  hoverinfo: 'text+name'
};
trace3 = {
  line: {shape: 'vhv'}, 
  mode: 'lines+markers', 
  name: ''vhv'', 
  type: 'scatter', 
  x: [1, 2, 3, 4, 5], 
  y: [11, 13, 12, 13, 11], 
  hoverinfo: 'name'
};
trace4 = {
  line: {shape: 'hvh'}, 
  mode: 'lines+markers', 
  name: ''hvh'', 
  type: 'scatter', 
  x: [1, 2, 3, 4, 5], 
  y: [16, 18, 17, 18, 16], 
  hoverinfo: 'name'
};
trace5 = {
  line: {shape: 'vh'}, 
  mode: 'lines+markers', 
  name: ''vh'', 
  type: 'scatter', 
  x: [1, 2, 3, 4, 5], 
  y: [21, 23, 22, 23, 21], 
  hoverinfo: 'name'
};
trace6 = {
  line: {shape: 'hv'}, 
  mode: 'lines+markers', 
  name: ''hv'', 
  type: 'scatter', 
  x: [1, 2, 3, 4, 5], 
  y: [26, 28, 27, 28, 26], 
  hoverinfo: 'name'
};
data = [trace1, trace2, trace3, trace4, trace5, trace6];
layout = {legend: {
    y: 0.5, 
    font: {size: 16}, 
    traceorder: 'reversed'
  }};
Plotly.plot('plotly-div', {
  data: data,
  layout: layout
})