{"id":23328913,"url":"https://github.com/itsawa/lite-chart-js","last_synced_at":"2025-04-07T08:58:37.814Z","repository":{"id":268114038,"uuid":"903352105","full_name":"ITSawa/lite-chart-js","owner":"ITSawa","description":"A lightweight library to create various types of charts including line, bar, point, and pie charts using HTML canvas.","archived":false,"fork":false,"pushed_at":"2024-12-14T11:46:27.000Z","size":8,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-13T12:40:06.892Z","etag":null,"topics":["chart","chartjs","charts","lib","library","web","website"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ITSawa.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":"2024-12-14T11:39:01.000Z","updated_at":"2024-12-14T15:37:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"f8281195-35f3-4da0-84a9-d341ae6bfe4f","html_url":"https://github.com/ITSawa/lite-chart-js","commit_stats":null,"previous_names":["itsawa/lite-chart-js"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ITSawa%2Flite-chart-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ITSawa%2Flite-chart-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ITSawa%2Flite-chart-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ITSawa%2Flite-chart-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ITSawa","download_url":"https://codeload.github.com/ITSawa/lite-chart-js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247623010,"owners_count":20968574,"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":["chart","chartjs","charts","lib","library","web","website"],"created_at":"2024-12-20T21:29:27.468Z","updated_at":"2025-04-07T08:58:37.809Z","avatar_url":"https://github.com/ITSawa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LiteChart\n\nLiteChart is a JavaScript library for creating various types of charts, including line, bar, point, and pie charts. It allows for easy configuration and rendering of charts in web applications.\n\n## Features\n\n- **Multiple chart types:** line, bar, point, and pie.\n- **Customizable chart colors.**\n- **Auto-scaling and grid lines** for line, bar, and point charts.\n- **Responsive pie charts** that adapt to the container size.\n- **Interactive and responsive charts.**\n\n## Installation\n\nTo install LiteChart, you can use **npm** or include it directly in your HTML file.\n\n### Using npm\n\nInstall LiteChart via npm with the following command:\n\n```bash\nnpm install lite-chart-js\nTip: To copy the command, simply click on the box above.\n\nIncluding in HTML\nAlternatively, include LiteChart directly in your HTML file by referencing the script:\n\nhtml\n\n\u003cscript src=\"path/to/charts.js\"\u003e\u003c/script\u003e\nUsage\nCreating a LiteChart\nTo create a LiteChart, instantiate the class with the desired options:\n\njavascript\n\nconst chart = new LiteChart({\n  data: [10, 20, 30, 40, 50],\n  type: 'line', // Possible values: 'line', 'bar', 'point', 'pie'\n  colors: ['#4e73df', '#1cc88a', '#36b9cc']\n});\nRendering the Chart\nRender the chart in a specified HTML element by calling the spawn method with the element's ID:\n\njavascript\n\nchart.spawn('chartContainer');\nFull Example\nHere's a full HTML example to use LiteChart in your project:\n\nhtml\n\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eLiteChart Example\u003c/title\u003e\n  \u003cscript src=\"path/to/LiteChart.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv class=\"chart-container\" id=\"chartContainer\"\u003e\u003c/div\u003e\n\n  \u003cscript\u003e\n    const chart = new LiteChart({\n      data: [10, 20, 30, 40, 50],\n      type: 'line', // You can change this to 'bar', 'point', or 'pie'\n      colors: ['#4e73df', '#1cc88a', '#36b9cc']\n    });\n    chart.spawn('chartContainer');\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\nAPI\nConstructor: new LiteChart(options)\nCreate a new LiteChart instance with the provided options.\n\noptions: An object containing the configuration for the chart.\ndata: An array of numbers representing the data points for the chart.\ntype: A string representing the type of chart ('line', 'bar', 'point', 'pie'). Default is 'line'.\ncolors: An array of strings representing the colors for the chart. Default is ['#4e73df', '#1cc88a', '#36b9cc'].\nMethods\nspawn(elementId)\nInitializes and renders the chart in the specified HTML element.\n\nelementId: The ID of the HTML element where the chart will be rendered.\ndraw()\nDraws the chart based on the type specified in the constructor.\n\nclearCanvas()\nClears the canvas.\n\ngetMaxValue()\nReturns the maximum value from the data set.\n\ndrawAxes()\nDraws the axes and grid lines for the chart.\n\ndrawLabels()\nDraws the labels for the chart axes.\n\ngetYPosition(value, maxValue)\nCalculates the Y position for a given value.\n\nvalue: The data value.\nmaxValue: The maximum value in the data set.\ngetXPosition(index)\nCalculates the X position for a given index.\n\nindex: The data index.\ndrawLineChart()\nDraws a line chart.\n\ndrawBarChart()\nDraws a bar chart.\n\ndrawPointChart()\nDraws a point chart.\n\ndrawPieChart()\nDraws a pie chart.\n\nLicense\nLiteChart is licensed under the MIT License. See the LICENSE file for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsawa%2Flite-chart-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsawa%2Flite-chart-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsawa%2Flite-chart-js/lists"}