{"id":20903809,"url":"https://github.com/suyashsingh/chartjs-samples","last_synced_at":"2026-03-11T19:15:01.234Z","repository":{"id":204161402,"uuid":"212505770","full_name":"suyashsingh/chartjs-samples","owner":"suyashsingh","description":"Chart.js visualization samples","archived":false,"fork":false,"pushed_at":"2019-10-03T11:24:04.000Z","size":13,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-12T22:43:47.600Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"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/suyashsingh.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}},"created_at":"2019-10-03T05:48:30.000Z","updated_at":"2021-05-23T17:15:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"8ade4e46-07ba-4ce8-8197-1d5ce4ed6fde","html_url":"https://github.com/suyashsingh/chartjs-samples","commit_stats":null,"previous_names":["suyashsingh/chartjs-samples"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/suyashsingh/chartjs-samples","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suyashsingh%2Fchartjs-samples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suyashsingh%2Fchartjs-samples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suyashsingh%2Fchartjs-samples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suyashsingh%2Fchartjs-samples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/suyashsingh","download_url":"https://codeload.github.com/suyashsingh/chartjs-samples/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suyashsingh%2Fchartjs-samples/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30395154,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-11T18:46:22.935Z","status":"ssl_error","status_checked_at":"2026-03-11T18:46:17.045Z","response_time":84,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-11-18T13:15:02.678Z","updated_at":"2026-03-11T19:15:01.205Z","avatar_url":"https://github.com/suyashsingh.png","language":"HTML","readme":"# Chart.js Chart Samples\nData visualization using Chart.js.\n\n## Contents\n1. `hello-world-chart.html`: Maiden voyage to charting using chartjs.\n2. `responsive-chart.html`: Integrating Chart.js with Bootstrap 4.\n3. `multiple-charts.html`: Multiple responsive charts in a page.\n4. `chart-with-animation-customization.html`: Changing the default animation type\n5. `chart-with-title-customization.html`: Enabling / Customizing chart title.\n6. `chart-with-dynamic-data.html`: Bar chart with dynamic data\n\n## Notes\n1. At bare minimum, a chart can be created using (chart customization options \ncan be ommited as well.):\n\n```javascript\nvar myChart = new Chart(ctx, {\n    type: 'bar',\n    data: chartData,\n    options: customizationOptions\n});\n```\n\n2. Disabling user selection in the canvas would be needed as clicking legends on\nthe canvas will select some text on the webpage. Refer this [link](https://www.w3schools.com/cssref/css3_pr_user-select.asp)\nfor more information.\n\n```css\n\u003cstyle\u003e\n    /*\n        Disable text selection in the canvas, else when you click the\n        legend some text on the page might get selected, which is not \n        desirable.\n    */\n    canvas {\n        -moz-user-select: none;\n        -webkit-user-select: none;\n        -ms-user-select: none;\n        user-select: none; /* Standard syntax */\n    }\n\u003c/style\u003e\n```\n3. There is no default type of the chart. You will have to explicitely specify \nthe chart type else you will get an error.\n\n4. Animation can be customized as follows:\n\n```javascript\nvar myChart = new Chart(ctx, {\n    type: 'bar',\n    data: chartData,\n    options: {\n        animation: {\n           \n            duration: 500,  // Change the animation durarion, 0 for no animation\n            easing: \"easeInQuad\" // Change the animation type a.k.a easing function\n        }\n    }\n});\n```\n\n5. Title Customizations:\n\n```javascript\nvar myChart = new Chart(ctx, {\n    type: 'bar',\n    data: chartData,\n    options: {\n        title: {\n            display: true, // defaults to false\n            text: \"Chart with Title Customization\",\n            fontSize: 45,\n            fontFamily: 'Helvetica',\n            fontColor: '#212529',\n            fontStyle: 'bold',\n            position: 'bottom' // position of the chart title\n        }\n    }\n});\n```\n6. Bar Width Customization: \n\n```javascript\nvar customizationOptions = {\n    scales: {\n        xAxes: [{\n        barThickness: 700\n        }]\n    }\n};\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuyashsingh%2Fchartjs-samples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuyashsingh%2Fchartjs-samples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuyashsingh%2Fchartjs-samples/lists"}