CanvasJS Cheat Sheet: Quick Guide to Interactive Charts

CanvasJS is a JavaScript library for creating interactive and visually appealing charts. Whether you’re building dashboards, reports, or data visualizations, CanvasJS provides a wide range of features to help you present data effectively. In this guide, we’ll explore the key functionalities of CanvasJS, from basic setup to advanced configurations, and provide practical examples to help you get started.

1. Getting Started with CanvasJS

Including the Library

To use CanvasJS, include the library in your HTML file:

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>

Basic HTML Structure

Create a container for your chart:

<div id="chartContainer" style="height: 300px; width: 100%;"></div>

Creating Your First Chart

Here’s how to create a simple column chart:

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true, // Enable animations
    title: {
        text: "Monthly Sales Data" // Chart title
    },
    axisX: {
        title: "Month" // X-axis title
    },
    axisY: {
        title: "Sales (in $)" // Y-axis title
    },
    data: [{
        type: "column", // Chart type
        dataPoints: [ // Data points
            { label: "January", y: 10000 },
            { label: "February", y: 15000 },
            { label: "March", y: 25000 }
        ]
    }]
});
chart.render(); // Render the chart

Exploring Chart Types

CanvasJS supports a variety of chart types, including:

• Line Chart: type: "line"
• Column Chart: type: "column"
• Bar Chart: type: "bar"
• Pie Chart: type: "pie"
• Area Chart: type: "area"
• Spline Chart: type: "spline"
• Scatter Chart: type: "scatter"
• Bubble Chart: type: "bubble"

Each chart type can be customized to suit your data visualization needs.

Customizing Charts

Axis Customization

Customize the X and Y axes to improve readability:

axisX: {
    title: "Month",
    interval: 1, // Interval between labels
    labelAngle: -45, // Rotate labels
    gridThickness: 1 // Grid line thickness
},
axisY: {
    title: "Sales (in $)",
    includeZero: true // Include zero in the scale
}

Legend Customization

Add a legend and customize its behavior:

legend: {
    cursor: "pointer", // Change cursor on hover
    itemclick: function (e) {
        // Toggle data series visibility on legend click
        if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
            e.dataSeries.visible = false;
        } else {
            e.dataSeries.visible = true;
        }
        chart.render();
    }
}

Tooltip Customization

Customize tooltips to display additional information:

toolTip: {
    shared: true, // Shared tooltip for multiple series
    content: "{label}: {y}" // Custom tooltip content
}

Advanced Features

Zooming and Panning

Enable zooming and panning for interactive data exploration:

zoomEnabled: true,
zoomType: "xy" // "x", "y", "xy"

StripLines

Highlight specific values with striplines:

axisY: {
    stripLines: [{
        value: 50,
        label: "Threshold",
        color: "red",
        thickness: 2
    }]
}

Stacked Charts

Create stacked column or bar charts:

data: [{
    type: "stackedColumn",
    name: "Series 1",
    dataPoints: [{ label: "A", y: 10 }, { label: "B", y: 20 }]
}, {
    type: "stackedColumn",
    name: "Series 2",
    dataPoints: [{ label: "A", y: 15 }, { label: "B", y: 25 }]
}]

Dynamic Data Updates

Update your chart dynamically with new data:

function updateChart() {
    var newDataPoint = { label: "New Point", y: Math.random() * 100 };
    chart.options.data[0].dataPoints.push(newDataPoint);
    if (chart.options.data[0].dataPoints.length > 10) {
        chart.options.data[0].dataPoints.shift();
    }
    chart.render();
}
setInterval(updateChart, 1000); // Update every second

Exporting Charts

Export your chart as an image:

chart.exportChart({ format: "png" });
         // Options: {
         //    format: String ("jpg" | "png"),
         //    toDataURL: Boolean (default false),
         //    fileName: String
         // } 

Example: Advanced Chart

Here’s an example of an advanced chart with multiple series and customization:

var chart = new CanvasJS.Chart("chartContainer", {
    theme: "light2",
    animationEnabled: true,
    title: { text: "Advanced Chart" },
    axisX: { title: "Categories" },
    axisY: { title: "Values", includeZero: false },
    toolTip: { shared: true },
    legend: { 
      cursor: "pointer",
      itemclick: function (e) {
        if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
          e.dataSeries.visible = false;
        } else {
          e.dataSeries.visible = true;
        }
        e.chart.render();
      } 
    },
    data: [{
        type: "column",
        name: "Series 1",
        showInLegend: true,
        dataPoints: [
            { label: "A", y: 10, color: "red" },
            { label: "B", y: 20, color: "blue" }
        ]
    }, {
        type: "line",
        name: "Series 2",
        showInLegend: true,
        dataPoints: [
            { label: "A", y: 15 },
            { label: "B", y: 25 }
        ]
    }]
});
chart.render();

CanvasJS is a versatile and user-friendly library for creating interactive charts. With its extensive customization options and advanced features, you can build stunning visualizations tailored to your needs. Whether you’re a beginner or an experienced developer, this guide provides the tools and knowledge to master CanvasJS.

For more details, explore the official CanvasJS Documentation. Happy charting! 🚀

GitHub - vishwas-r/CanvasJS-CheatSheet