Get started with rickshaw CDN

MIT licensed

The Rickshaw library is a JS toolkit for creating interactive, customizable charts.

Tags:
  • graphs
  • charts
  • interactive
  • time-series
  • svg
  • d3
  • bars
  • lines
  • scatterplot

Stable version

Copied!

How to start using rickshaw CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with rickshaw CDN - cdnhub.io</title>
  <style>
    #chart { width: 900px; height: 500px; }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/d3@5/dist/d3.min.js"></script>
  <script src="https://cdn.cdnhub.io/rickshaw/1.7.1/rickshaw.min.js"></script>
</head>
<body>
  <div id="chart"></div>
  <script>
    // Sample data
    const data = [
      { label: 'Series A', data: [11, 16, 7, 17, 11, 13, 15] },
      { label: 'Series B', data: [15, 12, 14, 10, 13, 17, 18] },
    ];

    // Set up the chart
    const chart = new Rickshaw.Graph({
      element: document.getElementById('chart'),
      width: 900,
      height: 500,
      renderer: 'line',
      series: data.map((d, i) => new Rickshaw.Series(d.label, d.data)),
    });

    // Add axes
    const xAxis = new Rickshaw.Axis.X({
      graph: chart,
      label: 'X Axis',
    });
    const yAxis = new Rickshaw.Axis.Y({
      graph: chart,
      label: 'Y Axis',
      orient: 'right',
    });

    // Render the chart
    chart.render();

    // Update the chart with new data
    setInterval(() => {
      data[0].data.push(Math.random() * 20);
      data[1].data.push(Math.random() * 25);
      chart.update();
    }, 1000);
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions