{"id":25684396,"url":"https://github.com/flowbit-team/flowbit-chart","last_synced_at":"2025-08-27T19:33:15.891Z","repository":{"id":223275437,"uuid":"756229721","full_name":"flowbit-team/FLOWBIT-CHART","owner":"flowbit-team","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-09T05:39:12.000Z","size":85,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"develop/2.0.0/new-design","last_synced_at":"2025-02-24T17:16:28.964Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/flowbit-team.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-02-12T08:41:30.000Z","updated_at":"2024-02-12T08:41:45.000Z","dependencies_parsed_at":"2025-01-22T11:13:06.594Z","dependency_job_id":null,"html_url":"https://github.com/flowbit-team/FLOWBIT-CHART","commit_stats":null,"previous_names":["team-flowbit/flowbit-chart","flowbit-team/flowbit-chart"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flowbit-team%2FFLOWBIT-CHART","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flowbit-team%2FFLOWBIT-CHART/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flowbit-team%2FFLOWBIT-CHART/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flowbit-team%2FFLOWBIT-CHART/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flowbit-team","download_url":"https://codeload.github.com/flowbit-team/FLOWBIT-CHART/tar.gz/refs/heads/develop/2.0.0/new-design","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240521046,"owners_count":19814694,"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":[],"created_at":"2025-02-24T17:16:30.373Z","updated_at":"2025-02-24T17:16:31.727Z","avatar_url":"https://github.com/flowbit-team.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SVG Chart Library(Flowbit)\n## About\nThis library is a tool that utilizes SVG to draw line charts based on the data prepared by the user.\n\n[Demo](https://frontserver.apps.sys.paas-ta-dev10.kr/)\n## How to use\n1. **Click green `\u003c\u003e Code` Button and clone this repository!**\n2. **Import and render the chart**\n```js\n let arr = [\n      49240292.0, 49959348.0, 49415788.0, 49089796.0, 49993528.0, 50756712.0,\n      50458944.0, 49985408.0, 49682928.0,\n  ];\n\n  let arr2 = [\n      49788000, 49218000, 49025000, 49779000, 50595000, 50429000, 50021000,\n      49536000, 50064000, 50692000, 50479000, \n  ];\n\n  let labels = [\n\t'1','2','3','4','5','6','7','8','9'\n  ];\n\n  let arrMax = Math.max(...arr);\n  let arrMin = Math.min(...arr);\n  let arr2Max = Math.max(...arr);\n  let arr2Min = Math.min(...arr);\n  \n  const dataList = [\n      {\n        label: 'BTC 실제가격',\n        color: '#fff',\n        width: 3,\n        data: arr2,\n        min: arr2Min,\n        max: arr2Max,\n      },\n      {\n        label: 'BTC 예측가격',\n        color: '#79ffe1',\n        width: 4,\n        data: arr,\n        min: arrMin,\n        max: arrMax,\n      },\n\n    ];\n   \n   let chart = new Chart({\n      targetId: 'chart', // The ID value of the parent HTML element where the chart will be generated.\n      size: {            // Size of Chart\n        width: 1500, \n        height: 790, \n        font: 15,    \n      },\n      datas: dataList,   // The datas to display on the screen through the chart.\n      labels: labels,    // The labels appearing on the x-axis of the chart.\n      backgroundColor: 'rgba(37, 57, 88, 0.35)', // The background color of chart\n      hoverCardBackgroundColor: // The background color of the card that appears when hovering over the chart.\n        'linear-gradient(107deg, rgba(250, 0, 255, 0.48) -36.41%, rgba(72, 81, 155, 0.78) 75.37%)',\n    });\n\n\tchart.render();\n```\n\n![스크린샷 2024-01-03 180639](https://github.com/ehdrbdndns/flowbit-lib/assets/60888473/4f42ff77-d038-41aa-a924-13aa873a5f8c)\n\nIf you want to use the zoom in/out feature, you can add the following code.\n\n```js\n let chart = new Chart({\n      targetId: 'chart',\n      size: {\n        width: 1500,\n        height: 790,\n        font: 15,\n      },\n      datas: dataList,\n      labels: labels,\n      backgroundColor: 'rgba(37, 57, 88, 0.35)',\n      hoverCardBackgroundColor:\n        'linear-gradient(107deg, rgba(250, 0, 255, 0.48) -36.41%, rgba(72, 81, 155, 0.78) 75.37%)',\n      zoom: true, // zoom mode\n      showDataCount: 15, // The number of datas to display initially on the screen.\n      showLabelCount: 15, // The fixed number of labels to display on the screen consistently.\n    });\n```\n\n![ezgif com-video-to-gif-converter](https://github.com/ehdrbdndns/flowbit-lib/assets/60888473/4b39e6fa-3c22-49ca-b2c4-806c3c2163dd)\n\nIf you want to apply gradient colors, you can add the following code.\nYou need to create gradients directly using the SVG `\u003cdefs\u003e` tag.\n\n```js\n const dataList = [\n...\n      {\n        label: 'BTC 예측가격',\n        customColor: (create) =\u003e {\n          let ns = 'http://www.w3.org/2000/svg';\n          \n          // line\n          const linearGradientTag = document.createElementNS(\n            ns,\n            'linearGradient'\n          );\n\n          const linearStop1 = document.createElementNS(ns, 'stop');\n          linearStop1.setAttribute('stop-color', '#FA00FF');\n\n          const linearStop2 = document.createElementNS(ns, 'stop');\n          linearStop2.setAttribute('offset', '1');\n          linearStop2.setAttribute('stop-color', '#0085FF');\n          \n          linearGradientTag.appendChild(linearStop1);\n          linearGradientTag.appendChild(linearStop2);\n\n          // legend\n          const LegendGradientTag = document.createElementNS(\n            ns,\n            'linearGradient'\n          );\n\n          const legendStop1 = document.createElementNS(ns, 'stop');\n          legendStop1.setAttribute('stop-color', '#FA00FF');\n\n          const legendStop2 = document.createElementNS(ns, 'stop');\n          legendStop2.setAttribute('offset', '1');\n          legendStop2.setAttribute('stop-color', '#0085FF');\n\n          LegendGradientTag.appendChild(legendStop1);\n          LegendGradientTag.appendChild(legendStop2);\n\n          // circle\n          const radialGradientTag = document.createElementNS(\n            ns,\n            'radialGradient'\n          );\n\n          const radialStop1 = document.createElementNS(ns, 'stop');\n          radialStop1.setAttribute('offset', '.3');\n          radialStop1.setAttribute('stop-color', '#FA00FF');\n\n          const radialStop2 = document.createElementNS(ns, 'stop');\n          radialStop2.setAttribute('offset', '1');\n          radialStop2.setAttribute('stop-opacity', '0');\n          radialStop2.setAttribute('stop-color', '#FA00FF');\n\n          radialGradientTag.appendChild(radialStop1);\n          radialGradientTag.appendChild(radialStop2);\n\n          return {\n            border: linearGradientTag,\n            lastPoint: radialGradientTag,\n            legend: LegendGradientTag,\n          };\n        },\n        width: 4,\n        data: arr,\n        min: testMin,\n        max: testMax,\n      },\n...\n    ];\n```\n\n![스크린샷 2024-01-03 180730](https://github.com/ehdrbdndns/flowbit-lib/assets/60888473/ad79ffd8-f186-41b9-a944-c5fcacaebbee)\n\n## Authors\n  - [Always0ne](https://github.com/Always0ne) - **Dong gyun Yang** - \u003cehdrbdndns@naver.com\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflowbit-team%2Fflowbit-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflowbit-team%2Fflowbit-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflowbit-team%2Fflowbit-chart/lists"}