Basic Setup

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

<div></div>

Creating a Chart

//Initialize the chartvar chart = new CanvasJS.Chart("chartContainer", {    animationEnabled: true, // Enable animations    title: {        text: "Chart Title" // Chart title    },    axisX: {        title: "X-Axis Title" // X-axis title    },    axisY: {        title: "Y-Axis Title" // Y-axis title    },    data: [{ // Data series        type: "column", // Chart type        dataPoints: [ // Data points            { label: "Category 1", y: 10 },            { label: "Category 2", y: 15 },            { label: "Category 3", y: 25 }        ]    }]});// Render the chartchart.render();

Chart Types

Data Points

dataPoints: [    { label: "Category 1", y: 10 },    { label: "Category 2", y: 20, color: "red" }, // Custom color    { label: "Category 3", y: 30, indexLabel: "Highest" } // Index label]

var dataPoints = [];for (var i = 0; i < 10; i++) {    dataPoints.push({ label: "Point " + i, y: Math.random() * 100 });}

Customization

axisX: {    title: "X-Axis",    interval: 1, // Interval between labels    labelAngle: -45, // Rotate labels    gridThickness: 1 // Grid line thickness},axisY: {    title: "Y-Axis",    includeZero: true // Include zero in the scale}

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: {    shared: true, // Shared tooltip for multiple series    content: "{label}: {y}" // Custom tooltip content}

Advanced Features

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

function updateChart() {    var newDataPoint = { label: "New Point", y: Math.random() * 100 };    chart.options.data[0].dataPoints.push(newDataPoint);    chart.render();}

chart.exportChart({ format: "png" }); // Options: "png", "jpg"

Event Handling

data: [{    type: "column",    dataPoints: [{ label: "A", y: 10, click: function(e) { alert("Clicked!"); } }]}]

Useful Methods

Example: Line Chart with Dynamic Data

var chart = new CanvasJS.Chart("chartContainer", {    title: { text: "Dynamic Line Chart" },    data: [{        type: "line",        dataPoints: []    }]});var xVal = 0;var updateInterval = 1000; // Update every secondvar dataLength = 20; // Number of data points to showfunction updateChart() {    var yVal = Math.random() * 100;    chart.options.data[0].dataPoints.push({ x: xVal, y: yVal });    if (chart.options.data[0].dataPoints.length > dataLength) {        chart.options.data[0].dataPoints.shift();    }    xVal++;    chart.render();}setInterval(updateChart, updateInterval);