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. Learn more →
Top 23 Chart Open-Source Projects
-
Project mention: A visual guide to Vision Transformer – A scroll story | news.ycombinator.com | 2024-04-16
Yes this was done with a combination of GSAP Scrolltrigger https://gsap.com/docs/v3/Plugins/ScrollTrigger/ and https://d3js.org/
-
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser
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`); } })();
-
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.
-
helm
-
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.
-
Plausible Analytics
Simple, open source, lightweight (< 1 KB) and privacy-friendly web analytics alternative to Google Analytics.
No clue what you mean, browser cache might even clear itself without you doing anything manually. This thing makes no sense.
Nowhere ever did it say Tech Demo anywhere, not in the HN headline, not on the page itself. No, thanks. And even as a tech demo, there is nothing impressive going in. It is stores shit to local storage, I guess. Lol, I just looked this up, and it was in Firefox on 2009 already? WHAT? https://developer.mozilla.org/en-US/docs/Web/API/Window/loca... I never used it myself directly, but I remember reading about some API that kind of is the new version of cookies that can store more and better and I think that is it. 2009, I would swear what I think about was newer, maybe I am mixing something up, maybe not.
It has unnecessarily tracking from the comment above, not sure if it even sends all your notes to https://plausible.io, and I do not care. For me, this fails as a tech demo or whatever the fuck It's supposed to be. Sorry to not get all excited about everything posted here. In 2009 it for sure would ;)
-
Project mention: Build Your Own Uptime Monitor with MeteorJS + Fetch + Plotly.js ☄️🔭 | dev.to | 2024-03-08
Plotly 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
-
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.
-
nivo
nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
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.
-
sampler
Tool for shell commands execution, visualization and alerting. Configured with a simple YAML file.
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-31
Victory 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-30
Both 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
-
GoJS, a JavaScript Library for HTML Diagrams
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
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-05
Chart 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.
-
fl_chart
FL Chart is a highly customizable Flutter chart library that supports Line Chart, Bar Chart, Pie Chart, Scatter Chart, and Radar Chart.
-
-
-
-
Official Website: https://primereact.org/
-
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.
Charts related posts
- 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
- Build Responsive, Animated Charts in Minutes with EazyChart for React and Vue
-
A note from our sponsor - SurveyJS
surveyjs.io | 17 Apr 2024
Index
What are some of the best open-source Chart projects? This list will help you:
Project | Stars | |
---|---|---|
1 | d3 | 107,600 |
2 | echarts | 58,801 |
3 | helm | 25,974 |
4 | Umami | 19,488 |
5 | Plausible Analytics | 18,148 |
6 | plotly.js | 16,506 |
7 | apexcharts.js | 13,776 |
8 | nivo | 12,610 |
9 | sampler | 12,207 |
10 | victory | 10,759 |
11 | PNChart | 9,714 |
12 | primeng | 9,397 |
13 | uPlot | 8,436 |
14 | charts | 8,374 |
15 | lightweight-charts | 8,178 |
16 | GoJS, a JavaScript Library for HTML Diagrams | 7,393 |
17 | rickshaw | 6,536 |
18 | react-chartjs-2 | 6,376 |
19 | fl_chart | 6,356 |
20 | Chartkick | 6,246 |
21 | go-echarts | 6,143 |
22 | Charts.css | 6,100 |
23 | primereact | 5,669 |