<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
</body>
Plotly.plot("graph", {
  data: [
    {
      x: [0, 1, 2],
      y: [0, 1, 2],
      line: {
        color: "red",
        simplify: false
      }
    }
  ],
  layout: {
    sliders: [
      {
        pad: { t: 30 },
        x: 0.05,
        len: 0.95,
        currentvalue: {
          xanchor: "right",
          prefix: "color: ",
          font: {
            color: "#888",
            size: 20
          }
        },
        transition: { duration: 500 },
        // By default, animate commands are bound to the most recently animated frame:
        steps: [
          {
            label: "red",
            method: "animate",
            args: [
              ["red"],
              {
                mode: "immediate",
                frame: { redraw: false, duration: 500 },
                transition: { duration: 500 }
              }
            ]
          },
          {
            label: "green",
            method: "animate",
            args: [
              ["green"],
              {
                mode: "immediate",
                frame: { redraw: false, duration: 500 },
                transition: { duration: 500 }
              }
            ]
          },
          {
            label: "blue",
            method: "animate",
            args: [
              ["blue"],
              {
                mode: "immediate",
                frame: { redraw: false, duration: 500 },
                transition: { duration: 500 }
              }
            ]
          }
        ]
      }
    ],
    updatemenus: [
      {
        type: "buttons",
        showactive: false,
        x: 0.05,
        y: 0,
        xanchor: "right",
        yanchor: "top",
        pad: { t: 60, r: 20 },
        buttons: [
          {
            label: "Play",
            method: "animate",
            args: [
              null,
              {
                fromcurrent: true,
                frame: { redraw: false, duration: 1000 },
                transition: { duration: 500 }
              }
            ]
          }
        ]
      }
    ]
  },
  // The slider itself does not contain any notion of timing, so animating a slider
  // must be accomplished through a sequence of frames. Here we’ll change the color
  // and the data of a single trace:
  frames: [
    {
      name: "red",
      data: [
        {
          x: [0, 0.5, 1],
          y: [0, 0.5, 1],
          "line.color": "red"
        }
      ]
    },
    {
      name: "green",
      data: [
        {
          x: [0, 0.25, 0.5],
          y: [0, 0.25, 0.5],
          "line.color": "green"
        }
      ]
    },
    {
      name: "blue",
      data: [
        { 
          mode: 'markers',
          x: [0, 0, 0],
          y: [0, 0, 0],
          "line.color": "blue"
        }
      ]
    }
  ]
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.