The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning. Learn more →
Top 23 Chart Open-Source Projects
-
-
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
Plausible Analytics
Simple, open source, lightweight (< 1 KB) and privacy-friendly web analytics alternative to Google Analytics.
-
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
nivo
nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
-
sampler
Tool for shell commands execution, visualization and alerting. Configured with a simple YAML file.
-
-
-
-
-
GoJS, a JavaScript Library for HTML Diagrams
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
-
-
-
fl_chart
FL Chart is a highly customizable Flutter chart library that supports Line Chart, Bar Chart, Pie Chart, Scatter Chart, and Radar Chart.
-
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
Project mention: A visual guide to Vision Transformer – A scroll story | news.ycombinator.com | 2024-04-16Yes this was done with a combination of GSAP Scrolltrigger https://gsap.com/docs/v3/Plugins/ScrollTrigger/ and https://d3js.org/
Project mention: A web crawler program for crawling Echarts official website examples implemented by Puppeter | dev.to | 2024-04-12import puppeteer from "puppeteer"; import fs from "node:fs"; import { storiesTpl, storiesArgs, generOptions, generOptionsWithFn, } from "./template.mjs"; const ECHARTS_BASE_URL = "https://echarts.apache.org/examples/en/index.html"; function capitalizeFirstLetter(str) { if (!str || str.length === 0) { return ""; } str = str.toLowerCase(); return str.charAt(0).toUpperCase() + str.slice(1); } (async function () { const browser = await puppeteer.launch(); const page = await browser.newPage(); // Navigate the page to a URL await page.goto(ECHARTS_BASE_URL); // Set screen size await page.setViewport({ width: 1080, height: 1024 }); // Type into search box // const examples = await page.type([".example-list-panel"]); const searchResultSelector = ".example-list-panel > div"; const results = await page.$$(searchResultSelector); for (const element of results) { // gener namespace const ele = await element.$(".chart-type-head"); const title = await ele.evaluate((el) => el.textContent); let namespace = title.split(" ").filter(Boolean); namespace = namespace.slice(0, namespace.length - 1); namespace = namespace .map((item) => item.replace("\n", "").replace("/", "")) .filter(Boolean) .join(""); console.log(`${namespace} start`); const instances = await element.$$(".row .example-list-item"); const components = []; for (const instance of instances) { // title const titleElement = await instance.$(".example-title"); const subTitle = await titleElement.evaluate((el) => el.textContent); const titles = subTitle .split(" ") .filter(Boolean) .map((item) => item .replace(/\+/g, "") .replace(/\(/g, "") .replace(/\)/g, "") .replace(/-/g, "") ); const title = titles.map((item) => capitalizeFirstLetter(item)).join(""); const link = await instance.$(".example-link"); const newPagePromise = new Promise((resolve) => { browser.on("targetcreated", async (target) => { if (target.type() === "page") { const targetPage = await target.page(); const url = await targetPage.url(); if (url.includes("editor")) { resolve(targetPage); } } }); }); await link.click(); const newPage = await newPagePromise; await newPage.setViewport({ width: 40000, height: 20000 }); await newPage.waitForSelector(".ace_text-layer"); await new Promise((resolve) => { setTimeout(() => { resolve(); }, 3000); }); let content = await newPage.evaluate( () => document.querySelector(".ace_text-layer").innerText ); content = content .replace(/\[\]/g, "[] as any") .replace(//g, "") .replace(/var/g, "let"); let options; if (content.includes("myChart")) { options = generOptionsWithFn({ options: content }); } else { options = generOptions({ options: content }); } components.push({ options, title }); await newPage.close(); } const args = components .filter(({ options }) => { if (options.includes("$")) return false; return true; }) .map(({ options, title }) => storiesArgs({ options: options, name: title }) ) .join("\r\n"); const scripts = storiesTpl({ namespace: `Charts/${namespace}`, components: args, }); fs.writeFileSync(`./bots/assests/${namespace}.stories.ts`, scripts); console.log(`${namespace} end`); } })();
Applying Kubernetes manifests individually is problematic because files can get overlooked. Packaging your applications as Helm charts lets you version your manifests and easily repeat deployments into different environments. Helm tracks the state of each deployment as a "release" in your cluster.
Are you tired of relying solely on Google Analytics to track your website's performance? Look no further! Introducing Umami , a powerful and privacy-focused alternative that puts you in control of your analytics data. Umami was founded by three brothers, Mike, Brian and Francis Cao as they were frustarted with using Google Analytics, which dominated and still does the industry of analytics despite of privacy concerns. As it is open-source, Umami quickly started being popular open-source project while still respecting privacy of users. My personal opinion, is that Umami is really easy to setup and use, for smaller projects as my personal website it is of great use. It does not many tracking as GA but it really does its job.
I could do the same exercise with Google Analytics and Google Tag Manager, but luckily I don't need to, since Plausible already did. A piece of advice, rip out Google Analytics and use Plausible instead. It first of all doesn't destroy your website, and secondly it doesn't violate the GDPR - So you can embed it on your site without having to warn your visitors about that they're being spied on by Google.
Project mention: Build Your Own Uptime Monitor with MeteorJS + Fetch + Plotly.js ☄️🔭 | dev.to | 2024-03-08Plotly as our chart renderer
Project mention: Show HN: A JavaScript library for data visualization in both SVG and Canvas | news.ycombinator.com | 2024-04-11
Project mention: Level Up Your Web App with Stunning React Charts: Introducing the Top 10 React Charts Libraries | dev.to | 2023-07-31Nivo is a data visualization library built on top of D3.js and React. It offers a range of well-designed, customizable charts with great animations, making it suitable for creating visually impressive data visualizations.
Hi ! I'm currently in the process of building myself dashboards using sampler and / or WTF. I want a section with the live ETA of some buses stop from STM. I know they have an SMS option so that may be a lead but i've figured there might be a better way using iBus or something. Thanks in advance !!
Project mention: Level Up Your Web App with Stunning React Charts: Introducing the Top 10 React Charts Libraries | dev.to | 2023-07-31Victory is a set of modular charting components for React and React Native. Victory makes it easy to get started without sacrificing flexibility. Create one of a kind data visualizations with fully customizable styles and behaviors. Victory uses the same API for web and React Native applications for easy cross-platform charting.
Project mention: Episode 23/49: RouterTestingHarness, Chrome DevTools 119 & 120 | dev.to | 2023-12-14
Project mention: Coexistence of containers and Helm charts - OCI based registries | dev.to | 2024-01-30Both of these examples seem pretty obvious and something you wouldn’t mess up, but as your chart grows, so does your values.yaml file. A great example is the Redis chart by Bitnami. I encourage you to scroll through its values file. See you in a minute!
link https://github.com/tradingview/lightweight-charts
Project mention: Burning money on paid ads for a dev tool – what we've learned | news.ycombinator.com | 2023-09-29Have spent six figures yearly on ads, mostly for reach for the developer-focused diagram library GoJS (https://gojs.net)
> Each experiment will need ~$500 and 2 weeks
I would add a zero if you want serious data. I would also double the timescale. $5,000 over 4 weeks
I second the uselessness of Google Display, it might look like conversions numbers are good but they are 100% too good to be true. As soon as you look into them you find the sources are things like "ad from HappyFunBabyTime Android app". You have to ruthlessly prune daily for months to get anything real, and even then I'm skeptical of value. For a developer tool with very strict conversion metrics!
But I disagree on Google Search:
> Good for conversion, bad for awareness.
Before we were popular it was excellent for awareness. Post popularity its much more arguable.
Project mention: How To Create a Chart From a Dynamic Dataset in Next JS Using Chart.js | dev.to | 2024-01-05Chart JS is a great choice for creating charts as it has multiple visualizations. There are different integrations for the JS frameworks, and we shall use react-chart-js-2 library for Next JS.
Official Website: https://primereact.org/
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
Charts related posts
- You get what you Measure: Understanding your applications health with Grafana, Loki and Prometheus
- A visual guide to Vision Transformer – A scroll story
- Show HN: A JavaScript library for data visualization in both SVG and Canvas
- A web crawler program for crawling Echarts official website examples implemented by Puppeter
- Umami: Best free Go-To Google Analytics Alternative
- Vega-Lite – A Grammar of Interactive Graphics
- How to take down production with a single Helm command
-
A note from our sponsor - WorkOS
workos.com | 24 Apr 2024
Index
What are some of the best open-source Chart projects? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | d3 | 107,634 |
| 2 | echarts | 58,883 |
| 3 | helm | 26,013 |
| 4 | Umami | 19,579 |
| 5 | Plausible Analytics | 18,213 |
| 6 | plotly.js | 16,523 |
| 7 | apexcharts.js | 13,812 |
| 8 | nivo | 12,643 |
| 9 | sampler | 12,220 |
| 10 | victory | 10,767 |
| 11 | PNChart | 9,714 |
| 12 | primeng | 9,420 |
| 13 | uPlot | 8,452 |
| 14 | charts | 8,391 |
| 15 | lightweight-charts | 8,208 |
| 16 | GoJS, a JavaScript Library for HTML Diagrams | 7,404 |
| 17 | rickshaw | 6,536 |
| 18 | react-chartjs-2 | 6,381 |
| 19 | fl_chart | 6,376 |
| 20 | Chartkick | 6,254 |
| 21 | go-echarts | 6,156 |
| 22 | Charts.css | 6,100 |
| 23 | primereact | 5,721 |
Sponsored
Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com