Get started with c3 CDN

MIT licensed

C3.js: Interactive, dynamic charting library for JS.

Tags:
  • d3
  • chart
  • graph

Stable version

Copied!

How to start using c3 CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with c3 CDN - cdnhub.io</title>
  <style>
    #chart {
      width: 600px;
      height: 400px;
    }
  </style>
</head>
<body>
  <div id="chart"></div>
  <script src="https://cdn.jsdelivr.net/npm/d3@5/dist/d3.min.js"></script>
  <script src="https://cdn.cdnhub.io/c3/0.7.20/c3.min.js"></script>
  <script>
    const data = [
      { label: "Page A", value: [10, 15, 12, 17, 18] },
      { label: "Page B", value: [5, 10, 15, 12, 14] },
    ];

    const chart = c3.generate({
      bindto: "#chart",
      data: {
        columns: data.map((d) => d.label),
        type: "line",
        json: data,
      },
      axis: {
        x: {
          label: "Month",
          type: "category",
        },
        y: {
          label: "Page Views",
        },
      },
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions