{"id":13401213,"url":"https://github.com/kis/chartify","last_synced_at":"2025-05-16T14:06:04.007Z","repository":{"id":35042735,"uuid":"73579268","full_name":"kis/chartify","owner":"kis","description":"📊 📈 📉 React.js plugin for building charts using CSS","archived":false,"fork":false,"pushed_at":"2023-02-28T21:16:04.000Z","size":25420,"stargazers_count":692,"open_issues_count":20,"forks_count":23,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-09-15T05:48:29.427Z","etag":null,"topics":["barchart","chart","charts","css-chart","linechart","react","react-plugins","visualization"],"latest_commit_sha":null,"homepage":"https://chartify-213721.web.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"docs/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-11-12T21:23:56.000Z","updated_at":"2024-09-13T10:33:42.000Z","dependencies_parsed_at":"2024-04-10T20:28:55.563Z","dependency_job_id":null,"html_url":"https://github.com/kis/chartify","commit_stats":{"total_commits":303,"total_committers":5,"mean_commits":60.6,"dds":0.01320132013201325,"last_synced_commit":"11aabdad5235cf6c4d7435cf09f03495adc76451"},"previous_names":["kirillstepkin/chartify"],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kis%2Fchartify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kis%2Fchartify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kis%2Fchartify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kis%2Fchartify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kis","download_url":"https://codeload.github.com/kis/chartify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248545756,"owners_count":21122214,"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":["barchart","chart","charts","css-chart","linechart","react","react-plugins","visualization"],"created_at":"2024-07-30T19:00:59.900Z","updated_at":"2025-04-12T09:29:19.948Z","avatar_url":"https://github.com/kis.png","language":"TypeScript","readme":"\u003ch1 align='center'\u003eChartify\u003c/h1\u003e\n\n\u003cp align='center'\u003eReact.js plugin for building charts using CSS.\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\t\u003ca href='https://www.npmjs.com/package/chartify'\u003e\u003cimg src=\"https://img.shields.io/npm/v/chartify.svg?style=flat-square\" alt=\"\"\u003e\u003c/a\u003e\n\t\u003ca href='https://www.npmjs.com/package/chartify'\u003e\u003cimg src='https://img.shields.io/npm/dm/chartify.svg?style=flat-square' /\u003e\u003c/a\u003e\n\t\u003ca href='https://www.npmjs.com/package/chartify'\u003e\u003cimg src='https://img.shields.io/npm/dt/chartify.svg?style=flat-square' /\u003e\u003c/a\u003e\n\t\u003ca href='https://github.com/kis/chartify'\u003e\u003cimg src='https://img.shields.io/travis/kis/chartify/master.svg?style=flat-square' /\u003e\u003c/a\u003e\n    \u003ca href='https://coveralls.io/github/kis/chartify?branch=master'\u003e\u003cimg src='https://coveralls.io/repos/github/kis/chartify/badge.svg?branch=master' alt='Coverage Status' /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n![alt text](https://raw.githubusercontent.com/kis/chartify/master/blocks.jpg)\n\nThe source for this module is in the [main repo](https://github.com/kis/chartify).  \nExample app is [here](https://github.com/kis/chartify/tree/master/example).  \nBackend service for the example app is [here](https://github.com/kis/chartify-service).  \nnpm package is [here](https://www.npmjs.com/package/chartify).\n\n\u003ch3 align='center'\u003eInstall\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/kis/chartify/blob/master/index.js\"\u003e\n        \u003cimg src=\"http://img.badgesize.io/kis/chartify/master/index.js?compression=gzip\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n```\nnpm install chartify --save-dev\n```\n\n\u003ch3 align='center'\u003eGetting started\u003c/h3\u003e\n\n```javascript\nimport Chartify from 'chartify';\n\nconst data = [{\n    xValue: '20.11.2016',\n    yValue: 5,\n    title: '007 Spectre'\n}];\n\nconst config = {\n    theme: 'blue',\n    width: 50,\t\t\t      \n    height: 10,\t\t\n    boxSize: 20,\n    isLineChart: false,\n    bordered: false\n};\n\n\u003cChartify \n    data={data} \n    container=\"films-container\" \n    config={config} \n/\u003e\n```\n\n\u003ch3 align='center'\u003ePassing props\u003c/h3\u003e\n\nData prop is a dataset that should be an array of objects:    \n```[{ xValue: '12.03.2019', yValue: 8, title: 'men in black' }]```\n\nKeys are required and types are:  \n```{ xValue: string, yValue: number, title: string }```\n\nContainer prop is a class that will be added to the chart container element. This is important in case you have more than one chart on your page.   \n\nConfig prop is an object with properties:  \n\u003cb\u003etheme\u003c/b\u003e:\u003ci\u003estring\u003c/i\u003e - is color scheme of the chart, \u003ci\u003e\"default\", \"blue\", \"grey\", \"white\"\u003c/i\u003e etc.\u003cbr/\u003e\n\u003cb\u003ewidth\u003c/b\u003e:\u003ci\u003enumber\u003c/i\u003e - is the length of the data array by X-axis.\u003cbr/\u003e\n\u003cb\u003eheight\u003c/b\u003e:\u003ci\u003enumber\u003c/i\u003e - is the length of the data by Y-axis.\u003cbr/\u003e\n\u003cb\u003eboxSize\u003c/b\u003e:\u003ci\u003enumber\u003c/i\u003e - is size of each box in pixels.\u003cbr/\u003e\n\u003cb\u003eisLineChart\u003c/b\u003e:\u003ci\u003eboolean\u003c/i\u003e - is param that determines if this is a line-chart.\u003cbr/\u003e\n\u003cb\u003ebordered\u003c/b\u003e:\u003ci\u003eboolean\u003c/i\u003e - is param that determines if each box has white borders.\u003cbr/\u003e  \n\n\u003ch3 align='center'\u003eLicense\u003c/h3\u003e\n\nThe MIT License (MIT) Copyright (c) 2020\n","funding_links":[],"categories":["Uncategorized","TypeScript","React [🔝](#readme)"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkis%2Fchartify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkis%2Fchartify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkis%2Fchartify/lists"}