{"id":25397315,"url":"https://github.com/vishwas-r/canvasjs-cheatsheet","last_synced_at":"2025-10-04T11:05:29.500Z","repository":{"id":276120794,"uuid":"647102304","full_name":"vishwas-r/CanvasJS-CheatSheet","owner":"vishwas-r","description":"📊 A compact and practical CanvasJS cheatsheet with essential code snippets, tips, and tricks to quickly build and customize charts. Perfect for quick reference! 🚀","archived":false,"fork":false,"pushed_at":"2025-02-06T11:48:02.000Z","size":30,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-11T00:57:53.930Z","etag":null,"topics":["canvasjs","charts","javascript","javascript-charts","js-charts"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vishwas-r.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-30T04:16:23.000Z","updated_at":"2025-02-06T11:48:06.000Z","dependencies_parsed_at":"2025-02-06T12:41:28.225Z","dependency_job_id":null,"html_url":"https://github.com/vishwas-r/CanvasJS-CheatSheet","commit_stats":null,"previous_names":["vishwas-r/canvasjs-cheatsheet"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vishwas-r%2FCanvasJS-CheatSheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vishwas-r%2FCanvasJS-CheatSheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vishwas-r%2FCanvasJS-CheatSheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vishwas-r%2FCanvasJS-CheatSheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vishwas-r","download_url":"https://codeload.github.com/vishwas-r/CanvasJS-CheatSheet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248322611,"owners_count":21084336,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvasjs","charts","javascript","javascript-charts","js-charts"],"created_at":"2025-02-15T21:39:54.284Z","updated_at":"2025-10-04T11:05:29.409Z","avatar_url":"https://github.com/vishwas-r.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📊CanvasJS CheatSheet📝\n\n### Basic Setup\nInclude CanvasJS Library\n```\n\u003cscript src=\"https://cdn.canvasjs.com/canvasjs.min.js\"\u003e\u003c/script\u003e\n```\n\nBasic HTML Structure\n```\n\u003cdiv id=\"chartContainer\" style=\"height: 300px; width: 100%;\"\u003e\u003c/div\u003e\n```\n\n### Creating a Chart\n```\n//Initialize the chart\nvar chart = new CanvasJS.Chart(\"chartContainer\", {\n    animationEnabled: true, // Enable animations\n    title: {\n        text: \"Chart Title\" // Chart title\n    },\n    axisX: {\n        title: \"X-Axis Title\" // X-axis title\n    },\n    axisY: {\n        title: \"Y-Axis Title\" // Y-axis title\n    },\n    data: [{ // Data series\n        type: \"column\", // Chart type\n        dataPoints: [ // Data points\n            { label: \"Category 1\", y: 10 },\n            { label: \"Category 2\", y: 15 },\n            { label: \"Category 3\", y: 25 }\n        ]\n    }]\n});\n\n// Render the chart\nchart.render();\n```\n\n### Chart Types\nCommon Chart Types\n- ```type: \"line\"``` - Line Chart\n- ```type: \"column\"``` - Column Chart\n- ```type: \"bar\"``` - Bar Chart\n- ```type: \"pie\"``` - Pie Chart\n- ```type: \"area\"``` - Area Chart\n- ```type: \"spline\"``` - Spline Chart\n- ```type: \"scatter\"``` - Scatter Chart\n- ```type: \"bubble\"``` - Bubble Chart\n\n### Data Points\nDataPoint Structure\n```\ndataPoints: [\n    { label: \"Category 1\", y: 10 },\n    { label: \"Category 2\", y: 20, color: \"red\" }, // Custom color\n    { label: \"Category 3\", y: 30, indexLabel: \"Highest\" } // Index label\n]\n```\n\nDynamic Data Points\n```\nvar dataPoints = [];\nfor (var i = 0; i \u003c 10; i++) {\n    dataPoints.push({ label: \"Point \" + i, y: Math.random() * 100 });\n}\n```\n\n### Customization\nAxis Customization\n```\naxisX: {\n    title: \"X-Axis\",\n    interval: 1, // Interval between labels\n    labelAngle: -45, // Rotate labels\n    gridThickness: 1 // Grid line thickness\n},\naxisY: {\n    title: \"Y-Axis\",\n    includeZero: true // Include zero in the scale\n}\n```\n\nLegend Customization\n```\nlegend: {\n    cursor: \"pointer\", // Change cursor on hover\n    itemclick: function (e) {\n        // Toggle data series visibility on legend click\n        if (typeof (e.dataSeries.visible) === \"undefined\" || e.dataSeries.visible) {\n            e.dataSeries.visible = false;\n        } else {\n            e.dataSeries.visible = true;\n        }\n        chart.render();\n    }\n}\n```\n\nTooltip Customization\n```\ntoolTip: {\n    shared: true, // Shared tooltip for multiple series\n    content: \"{label}: {y}\" // Custom tooltip content\n}\n```\n\n### Advanced Features\nMultiple Data Series\n```\ndata: [\n    {\n        type: \"column\",\n        name: \"Series 1\",\n        dataPoints: [{ label: \"A\", y: 10 }, { label: \"B\", y: 20 }]\n    },\n    {\n        type: \"line\",\n        name: \"Series 2\",\n        dataPoints: [{ label: \"A\", y: 15 }, { label: \"B\", y: 25 }]\n    }\n]\n```\n\nDynamic Updates\n```\nfunction updateChart() {\n    var newDataPoint = { label: \"New Point\", y: Math.random() * 100 };\n    chart.options.data[0].dataPoints.push(newDataPoint);\n    chart.render();\n}\n```\n\nExport Chart as Image\n```\nchart.exportChart({ format: \"png\" }); // Options: \"png\", \"jpg\"\n```\n\n### Event Handling\nData Point Click Event\n```\ndata: [{\n    type: \"column\",\n    dataPoints: [{ label: \"A\", y: 10, click: function(e) { alert(\"Clicked!\"); } }]\n}]\n```\n\n### Useful Methods\n- Render/update the chart - ```chart.render()```\n- Destroy the chart instance - ```chart.destroy()```\n- Export the chart as image - ```chart.exportChart(options)```\n- Add data points dynamically - ```chart.data[seriesIndex].addTo(dataPoints, {y: 29, label: \"Apple\" })```\n\n### Example: Line Chart with Dynamic Data\n```\nvar chart = new CanvasJS.Chart(\"chartContainer\", {\n    title: { text: \"Dynamic Line Chart\" },\n    data: [{\n        type: \"line\",\n        dataPoints: []\n    }]\n});\n\nvar xVal = 0;\nvar updateInterval = 1000; // Update every second\nvar dataLength = 20; // Number of data points to show\n\nfunction updateChart() {\n    var yVal = Math.random() * 100;\n    chart.options.data[0].dataPoints.push({ x: xVal, y: yVal });\n    if (chart.options.data[0].dataPoints.length \u003e dataLength) {\n        chart.options.data[0].dataPoints.shift();\n    }\n    xVal++;\n    chart.render();\n}\nsetInterval(updateChart, updateInterval);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvishwas-r%2Fcanvasjs-cheatsheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvishwas-r%2Fcanvasjs-cheatsheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvishwas-r%2Fcanvasjs-cheatsheet/lists"}