Get started with morpheus CDN

MIT licensed

Morpheus is a library for real-time data visualization and manipulation.

Tags:
  • ender
  • animation
  • motion
  • css
  • colors
  • morph
  • tween
  • curve
  • bezier
  • transform
  • skew
  • rotate

Stable version

Copied!

How to start using morpheus CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with morpheus CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/morpheus/morpheus.css">
    <script src="https://cdn.cdnhub.io/morpheus/0.7.2/morpheus.min.js"></script>
</head>
<body>
    <div id="chart"></div>

    <script>
        // Data
        const data = {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
            datasets: [
                {
                    label: 'Series A',
                    data: [12, 19, 3, 5, 21, 34, 10],
                    backgroundColor: 'rgba(255, 99, 122, 0.2)',
                    borderColor: 'rgba(255, 99, 122, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Series B',
                    data: [2, 9, 4, 5, 5, 25, 12],
                    backgroundColor: 'rgba(54, 160, 235, 0.2)',
                    borderColor: 'rgba(54, 160, 235, 1)',
                    borderWidth: 1
                }
            ]
        };

        // Configuration
        const options = {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Morpheus Chart Example'
                }
            }
        };

        // Initialize chart
        new Morpheus.Chart('chart', { data, options });
    </script>
</body>
</html>
Copied!
Copied!

All versions