📱📈An elegant, interactive and flexible charting library for mobile.

Overview

npm package NPM downloads Percentage of issues still open

F2,一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(node, 小程序,weex)。完备的图形语法理论,满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。英文 README

在此衷心感谢《The Grammar of Graphics》的作者 Leland Wilkinson,为 F2 的图形语法提供了理论基础!

安装

$ npm install @antv/f2

特性

专注移动,体验优雅

  • 轻量化呈现,自然反馈:在设计上我们以人为本,追求自然简单易懂,有吸引力的表达效果,让用户在碎片化的时间里更快更高效得获取图表信息。同时在可视化的操作我们追求内容和操作有机融合,符合人的自然行为反应,让交互操作更自然。

  • 轻巧流畅:F2 一直致力于追求极致的性能,针对移动设备做了大量的优化,在支持丰富(50+)图表的基础上同时保持代码量的小巧(不带交互版本 gzip 压缩后 44k,带所有交互版本 56k),同时提供模块化的设计以支持动态加载,提供更优的大小。

  • 多端异构:在完美支持 H5 环境的同时,同时兼容 Node.js支付宝小程序微信小程序React Native以及 Weex 端的渲染,一份代码,多设备多环境渲染。

图表丰富,组件完备

与传统的图表库不同,抛弃了特图特做的封装思路,基于强大的图形语法理论,以数据驱动,通过图形语法的组合灵活构建各类图表,目前可绘制 50+ 图表类型(当然,还可以更多),覆盖各类场景在提供基础的图表可视化能力外,我们还提供了丰富图表功能组件,满足各种功能需求。

扩展灵活,创意无限

我们在提供最佳实践的同时,还为开发者提供了灵活的扩展机制,包括 Shape、动画以及交互的自定义能力,当然还有图表样式的个性化定制,满足各种个性化的图表要求。

文档

快速开始

<canvas id="mountNode"></canvas>
// F2 对数据源格式的要求,仅仅是 JSON 数组,数组的每个元素是一个标准 JSON 对象。
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

// 获取 canvas context
const context = document.getElementById('mountNode').getContext('2d');
const { props } = (
  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
    <Chart data={data}>
      <Axis field="genre" />
      <Axis field="sold" />
      <Interval x="genre" y="sold" color="genre" />
      <Tooltip />
    </Chart>
  </Canvas>
);

const canvas = new Canvas(props);
canvas.render();

更多示例:demos

手机扫码观看 demos

本地开发

$ npm install

# 先初始化 monorepo
$ npm run bootstrap

# 再跑测试用例
$ npm run test

# 监听文件变化构建,并打开 demo 页面
$ npm run dev

# 打开某一个具体的测试用例
$ npm run test-watch -- 'TestFileName'

如何贡献

如果您在使用的过程中碰到问题,可以先通过 issues 看看有没有类似的 bug 或者建议。

如需提交代码,请遵从我们的贡献指南

体验改进计划说明

F2 从 3.1.12(2018-06-20 发布)版本开始添加了F2.track(true)方法。 目前我们的体验改进计划已经完成,所以从 3.3.4 版本开始该方法将从 F2 中删除。 如果它给你带来麻烦,我们深表歉意。

License

MIT license.

Comments
  • Weex 中引入F2  ios 真机和模拟器上均显示空白

    Weex 中引入F2 ios 真机和模拟器上均显示空白

    环境: node: v8.12.0 npm: 6.4.1 F2: 3.1.0 gcanvas.js: 0.0.8 weexSDK: 0.20.1

    gcanvas 引入成功例证:

    <template>
        <div>
            <gcanvas v-if="isWeex" ref="canvas_holder" style="width:750px;height:1000px;"></gcanvas>
            <canvas v-if="!isWeex" ref="canvas_holder" style="width:100%;height:100%;"></canvas>
        </div>
    </template>
    <script>
    // import F2 from '@antv/f2';
    const isWeex = weex.config.env.platform !== 'Web'
    const { enable, WeexBridge, Image: GImage } = require('gcanvas.js');
    const EnvImage = !isWeex ? Image : GImage;
    
    export default {
        data() {
            return {
                isWeex: isWeex ? 1 : 0
            }
        },
        mounted: function () {
    
            let ref = this.$refs.canvas_holder;
            if (isWeex) {
                ref = enable(ref, {bridge: WeexBridge});
            }
            var ctx = ref.getContext('2d');
    
            //rect
            ctx.fillStyle = 'red';
            ctx.fillRect(0, 0, 100, `100);`
        }
    };
    </script>
    

    可以描绘出一个红色矩形 image

    但是使用F2描绘官网引导例子: 柱形图时显示空白

    <template>
        <div>
            <gcanvas v-if="isWeex" ref="canvas_holder" style="width:750px;height:1000px;"></gcanvas>
            <canvas v-if="!isWeex" ref="canvas_holder" style="width:100%;height:100%;"></canvas>
        </div>
    </template>
    <script>
    import F2 from '@antv/f2';
    const isWeex = weex.config.env.platform !== 'Web'
    const { enable, WeexBridge, Image: GImage } = require('gcanvas.js');
    const EnvImage = !isWeex ? Image : GImage;
    
    export default {
        data() {
            return {
                isWeex: isWeex ? 1 : 0
            }
        },
        mounted: function () {
    
            let ref = this.$refs.canvas_holder;
            if (isWeex) {
                ref = enable(ref, {bridge: WeexBridge});
            }
            var ctx = ref.getContext('2d');
    
            // F2 对数据源格式的要求,仅仅是 JSON 数组,数组的每个元素是一个标准 JSON 对象。
            const data = [
                { genre: 'Sports', sold: 275 },
                { genre: 'Strategy', sold: 115 },
                { genre: 'Action', sold: 120 },
                { genre: 'Shooter', sold: 350 },
                { genre: 'Other', sold: 150 },
            ];
    
            // Step 1: 创建 Chart 对象
            const chart = new F2.Chart({
                context: ctx
            });
    
            // Step 2: 载入数据源
            chart.source(data);
    
            // Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
            chart.interval().position('genre*sold').color('genre');
    
            // Step 4: 渲染图表
            chart.render();
        }
    };
    </script>
    

    调研了好多天, 实在是解决不了了 - -

    opened by Bob2622 15
  • fix(types): fix the types of the entries and plugins

    fix(types): fix the types of the entries and plugins

    Checklist
    • [x] commit message follows commit guidelines
    Description of change
    • 修复对入口文件的类型定义方式,实际使用发现,直接 declare module '***.js' {} 是无法给指定文件定义类型的,因此,创建了一个 patch-types.js 的脚本直接生成入口文件的类型定义文件;
    • 因为某些插件需要手动引入使用,因此添加了各插件的类型定义文件,方法同上。

    实际效果:

    image image

    bug PR: merged 
    opened by fjc0k 13
  • f2分组柱状图 文本显示堆叠

    f2分组柱状图 文本显示堆叠

    用f2做小程序分组柱状图,要求文本显示在柱状图顶部,但是文本重叠。代码如下

    datas.map(function (obj) { chart.guide().text({ position: [obj.yAxis, obj.xAxis], content: obj.xAxis, offsetX: 8 }); });

    help wanted 
    opened by EleShader 13
  • feat(@antv/f2-vue): 增强对自定义图形及自定义图表组件的JSX编译支持

    feat(@antv/f2-vue): 增强对自定义图形及自定义图表组件的JSX编译支持

    解决Vue3项目中编译包含自定义View及自定义Shape时需要使用@babel/plugin-transform-react-jsx的问题。详见examples中的vue3-ts项目示例。 备注:自定义图表组件需引用@antv/f2-vue中的HOC。例如: import { withLegend } from "@antv/f2-vue"

    close #1573

    Checklist
    • [x] npm test passes
    • [x] tests and/or benchmarks are included
    • [x] commit message follows commit guidelines
    Description of change
    opened by lolarun 12
  • 稍微吐槽一下,几个问题

    稍微吐槽一下,几个问题

    1. 通过 '@antv/f2' 这个路径引入时,chart.interaction 会报 undefined
    import F2 from '@antv/f2'; 
    new F2.Chart().interaction(); <- undefined
    

    无奈之下我只能换成了import F2 from '@antv/f2/dist/f2-all.min.js';

    1. 接口设计有点太精简了。 说实话并不觉得同一个方法,因参数不同产生差异性很大的行为是一个好的设计。 比如: chart.axis(false); chart.axis(field, false); chart.axis(field, config) 我更倾向于这种设计:
    chart.axis.toggle(isShow: boolean) -> toggle all
    chart.axis.set(field: string, config: any) -> config
    chart.axis.set(field: string, isShow: boolean) -> toggle field
    

    分离开, 相信你方法实现的逻辑也能清晰一些,不用一堆类型判断。

    1. 交互有一个bug
     chart.interaction('pan', {
          limitRange: {
            id: {
              min: 0, <- 当这个参数为0的时候,x轴会无限趋于负无穷,而不是0,麻烦改一下。
              max: 100, <- 我相信这个为0时,也有类似的问题,不知道别的地方有没有
            }
          }
        });
    
    1. 目前,我只能说,与它真正好用还有一些距离。加油吧,就像jq一样,慢慢成长吧。
    opened by Eusen 12
  • feat: 多端多环境的适配与支持

    feat: 多端多环境的适配与支持

    Checklist
    • [ ] npm test passes
    • [ ] tests and/or benchmarks are included
    • [ ] commit message follows commit guidelines
    Description of change
    1. 移除部分对环境的依赖判断
    2. 提供更完整的多端多环境支持(尤其是小程序场景)
    enhancement PR: merged 
    opened by zengyue 11
  • pie-select的defaultSelected设置无效

    pie-select的defaultSelected设置无效

    • F2 Version:3.2.1-beta.1
    • Platform:
    • Mini Showcase(like screenshots):
    • CodePen Link:

    https://github.com/antvis/f2/issues/248#issuecomment-414200740 首先非常感谢提供这个feature,但设置后发现无效,后调试代码时发现 selectedShape 返回为null const selectedShape = self._getSelectedShapeByData(defaultSelected);

    opened by gg343917542 11
  • 手动调用chart.showTooltip()方法时不会显示辅助线

    手动调用chart.showTooltip()方法时不会显示辅助线

    两个图表关联时,在图1的onShow钩子中调用图2的showTooltip函数,会触发图2的onShow钩子函数,但是图2中不会出现辅助线(Crosshairs)。要怎么让图2也显示辅助线或者tooltipMarker,例如图1为平滑曲线图,图2为柱状图。是传入的位置参数不对吗?还是必须要自己调用canvas的方法画直线?

    opened by wenkeShi 10
  • [SoC2020] Data-Driven Chart Animation

    [SoC2020] Data-Driven Chart Animation

    数据驱动的图表动画
    Data-driven chart animation

    What is SoC2020: #885

    描述 Description

    以数据为中心,驱动图表变化并以动画形式表现变化过程

    Data-centric, driving chart changes and showing the change process in the form of animation.

    目标 Goal

    1. 定义数据集和图表, 当图表加载数据后,就可以进行图形绘制和动画播控
    2. 可以操控播放过程和速度,比如动画播放到某个阶段时,可暂定,恢复,重播,也可指定某个阶段的循环播放
    3. 动画的实现需要具备可扩展性,方便对任意类型的图表添加和替换

    1. Define data sets and charts, when the charts are loaded with data, you can perform graphics drawing and animation control
    2. Can control the playback process and speed, for example, when the animation reaches a certain stage, it can be tentatively, resumed, replayed, and can also specify a certain stage of loop playback
    3. The realization of animation needs to be extensible to facilitate the addition and replacement of any type of chart

    类似案例 Examples

    需要技能 Prerequisite Skills

    • JavaScript、Canvas等前端基础技能
    • 图形语法相关知识
    • 动画实现和原理
    • 具备G2/F2开发经验更佳

    • JavaScript, Canvas and front-end engineering skills.
    • Graphic grammar related knowledge
    • Animation implementation and principle
    • Better G2 / F2 development experience
    help wanted 
    opened by neoddish 9
  • 在`type: 'arc'`下fillStyle失效

    在`type: 'arc'`下fillStyle失效

    • F2 Version:3.3.0
    • Platform:web
    • Mini Showcase(like screenshots):
    • CodePen Link:https://antv.alipay.com/zh-cn/f2/3.x/demo/radar/line.html 具体问题就是上面链接是官方的链接,直接在138行增加一条代码fillStyle:'#cd0200', 目的是为了实现按区域显示背景色(代码上可以用rgba但是为了方便 直接没有透明通道的颜色 一样有问题),可是这段代码添加上去是没有效果的,感觉好像跟type: 'arc'有冲突,去掉type: 'arc'又是有效果的,可是我现在的场景就是需要圆形的雷达图。 望解答!谢谢!
    bug 
    opened by cydiacen 9
  • 关于折线图颜色变化问题

    关于折线图颜色变化问题

    • F2 Version: 3.2.1
    • Platform: android 我想实现这个效果
    // 绘制线
                chart
                    .line()
                    .shape('smooth')
                    .position('x*y')
                    .color('x', x => {
                        if (+x > 3 && +x < 8) {
                            return '#000';
                        }
    
                        return '#aa00aa';
                    });
    
    // 绘制点
                chart
                    .point()
                    .shape('smooth')
                    .position('x*y')
                    .color('x', x => {
                        if (+x > 3 && +x < 8) {
                            return '#000';
                        }
    
                        return '#aa00aa';
                    })
                    .style({
                        stroke: '#fff',
                        lineWidth: 1,
                    });
    
                chart.render();
    

    后 想通过判断改变在条件中的颜色,但是线没有效果,只有点有效果。请问下是什么原因?是不是不能用这个方法实现这种效果,如果是,能不能推荐一种方法呢?

    opened by talenHuang 9
  • 给实例注册 shape

    给实例注册 shape

    • [x] I have searched the issues of this repository and believe that this is not a duplicate.

    What problem does this feature solve?

    F2.Shape.registerShape 会给全局注册 Shape,希望提供给实例注册 shape 的方法

    What does the proposed API look like?

    chart.registerShape

    opened by youngjuning 0
  • vue根据官方提供的文档,只有第一次更新数据会刷新

    vue根据官方提供的文档,只有第一次更新数据会刷新

    • [ ] I have searched the issues of this repository and believe that this is not a duplicate.

    Reproduction link

    Edit on CodeSandbox

    Steps to reproduce

    运行后,初始化的时候可以根据预设的data1数据进行渲染。

    第一次触发定时函数后,数据变更,页面图表根据变化后的数据发生变化。

    第二次触发定时函数后,数据变更,页面图表未能根据变更后的数据进行重新渲染。

    第三次及后续触发定时函数后,数据变更,页面图表未能根据变更后的数据进行重新渲染。

    | Environment | Info | |---|---| | f2 | 4.0.38 | | System | - | | Browser | - |

    opened by Benjamin369 2
  • 分组柱状图使用scrollBar 平移只有下面的x轴数字变了,图表内容没有变化

    分组柱状图使用scrollBar 平移只有下面的x轴数字变了,图表内容没有变化

    • [ ] I have searched the issues of this repository and believe that this is not a duplicate.

    Reproduction link

    https://f2.antv.vision/zh/examples/column/dodge#dodge

    Steps to reproduce

    /// 数据 data: [ { name: 'frist', year: '1951 年', sales: 38, }, { name: 'frist', year: '1952 年', sales: 52, }, { name: 'frist', year: '1956 年', sales: 61, }, { name: 'frist', year: '1957 年', sales: 145, }, { name: 'frist', year: '1958 年', sales: 48, }, { name: 'frist', year: '1959 年', sales: 38, }, { name: 'frist', year: '1960 年', sales: 38, }, { name: 'frist', year: '1962 年', sales: 38, },

      {
        name: 'second',
        year: '1951 年',
        sales: 30,
      },
      {
        name: 'second',
        year: '1952 年',
        sales: 12,
      },
      {
        name: 'second',
        year: '1956 年',
        sales: 31,
      },
      {
        name: 'second',
        year: '1957 年',
        sales: 105,
      },
      {
        name: 'second',
        year: '1958 年',
        sales: 418,
      },
      {
        name: 'second',
        year: '1959 年',
        sales: 18,
      },
      {
        name: 'second',
        year: '1960 年',
        sales: 118,
      },
      {
        name: 'second',
        year: '1962 年',
        sales: 28,
      },
    ]
    

    ]

    /// 绘图 return ( <Chart data={data} scale={{ sales: { tickCount: 5, },

      }}>
      <Axis field="year" />
      <Axis field="sales" />
      <Interval x="year" y="sales" color="name" adjust={{ type: 'dodge', marginRatio: 0.05 }} />
      <ScrollBar mode="x" range={[0, 0.8]} autoFit={true} visible={true} pan={true}/>
    </Chart>
    

    )

    | Environment | Info | |---|---| | f2 | 4.0.26 | | System | - | | Browser | - |

    opened by wisdom1314 0
  • 分组柱状图,怎么设置每一个柱子的label都在对应柱子上,不然都挤在一起

    分组柱状图,怎么设置每一个柱子的label都在对应柱子上,不然都挤在一起

    opened by white-Hang 0
  • Add CodeQL workflow for GitHub code scanning

    Add CodeQL workflow for GitHub code scanning

    Hi antvis/F2!

    This is a one-off automatically generated pull request from LGTM.com :robot:. You might have heard that we’ve integrated LGTM’s underlying CodeQL analysis engine natively into GitHub. The result is GitHub code scanning!

    With LGTM fully integrated into code scanning, we are focused on improving CodeQL within the native GitHub code scanning experience. In order to take advantage of current and future improvements to our analysis capabilities, we suggest you enable code scanning on your repository. Please take a look at our blog post for more information.

    This pull request enables code scanning by adding an auto-generated codeql.yml workflow file for GitHub Actions to your repository — take a look! We tested it before opening this pull request, so all should be working :heavy_check_mark:. In fact, you might already have seen some alerts appear on this pull request!

    Where needed and if possible, we’ve adjusted the configuration to the needs of your particular repository. But of course, you should feel free to tweak it further! Check this page for detailed documentation.

    Questions? Check out the FAQ below!

    FAQ

    Click here to expand the FAQ section

    How often will the code scanning analysis run?

    By default, code scanning will trigger a scan with the CodeQL engine on the following events:

    • On every pull request — to flag up potential security problems for you to investigate before merging a PR.
    • On every push to your default branch and other protected branches — this keeps the analysis results on your repository’s Security tab up to date.
    • Once a week at a fixed time — to make sure you benefit from the latest updated security analysis even when no code was committed or PRs were opened.

    What will this cost?

    Nothing! The CodeQL engine will run inside GitHub Actions, making use of your unlimited free compute minutes for public repositories.

    What types of problems does CodeQL find?

    The CodeQL engine that powers GitHub code scanning is the exact same engine that powers LGTM.com. The exact set of rules has been tweaked slightly, but you should see almost exactly the same types of alerts as you were used to on LGTM.com: we’ve enabled the security-and-quality query suite for you.

    How do I upgrade my CodeQL engine?

    No need! New versions of the CodeQL analysis are constantly deployed on GitHub.com; your repository will automatically benefit from the most recently released version.

    The analysis doesn’t seem to be working

    If you get an error in GitHub Actions that indicates that CodeQL wasn’t able to analyze your code, please follow the instructions here to debug the analysis.

    How do I disable LGTM.com?

    If you have LGTM’s automatic pull request analysis enabled, then you can follow these steps to disable the LGTM pull request analysis. You don’t actually need to remove your repository from LGTM.com; it will automatically be removed in the next few months as part of the deprecation of LGTM.com (more info here).

    Which source code hosting platforms does code scanning support?

    GitHub code scanning is deeply integrated within GitHub itself. If you’d like to scan source code that is hosted elsewhere, we suggest that you create a mirror of that code on GitHub.

    How do I know this PR is legitimate?

    This PR is filed by the official LGTM.com GitHub App, in line with the deprecation timeline that was announced on the official GitHub Blog. The proposed GitHub Action workflow uses the official open source GitHub CodeQL Action. If you have any other questions or concerns, please join the discussion here in the official GitHub community!

    I have another question / how do I get in touch?

    Please join the discussion here to ask further questions and send us suggestions!

    opened by lgtm-com[bot] 0
Releases(@antv/[email protected])
Owner
AntV team
蚂蚁集团 - 数据可视化
AntV team
Simple yet flexible JavaScript charting for designers & developers

Simple yet flexible JavaScript charting for designers & developers Documentation All the links point to the new version 3 of the lib. Introduction Get

Chart.js 59.4k Jan 10, 2023
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 9, 2023
:dango: An interactive and responsive charting library

English | 简体中文 G2Plot A charting library based on the Grammar of Graphics. G2Plot is an interactive and responsive charting library. Based on the gram

AntV team 2.3k Dec 30, 2022
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 5, 2023
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Addepar 793 Dec 7, 2022
Open-source JavaScript charting library behind Plotly and Dash

Plotly.js is a standalone Javascript data visualization library, and it also powers the Python and R modules named plotly in those respective ecosyste

Plotly 15.3k Jan 4, 2023
A reusable charting library written in d3.js

NVD3 - A reusable D3 charting library Inspired by the work of Mike Bostock's Towards Reusable Charts, and supported by a combined effort of Novus and

Novus 7.2k Jan 3, 2023
Simple yet powerful JavaScript Charting library built using d3.js

uvCharts Simple, robust, extensible JavaScript charting library built using d3 designed to help developers embed, build charts in less than couple of

Imaginea 267 May 20, 2021
Liquify charting library

Liquify Liquify: fast, multi-threaded visualization of stream data with ChartJS & Angular. The aim of Liquify is to provide a fast, customizable and e

null 4 Aug 23, 2022
React components for Chart.js, the most popular charting library

react-chartjs-2 React components for Chart.js, the most popular charting library. Supports Chart.js v3 and v2. Quickstart • Docs • Slack • Stack Overf

null 5.6k Jan 4, 2023
An easy-to-use cross-framework JS charting library

Compact Chart Visualize your data under a minute, in any Javascript framework Table of Contents About How to use it Examples Demo Plain HTML Example w

Mireo 1 Jul 28, 2021
A server-side-rendered charting library for Fresh

fresh_charts A server side rendered charting library for Fresh based on Chart.js. Usage There are two main ways to render a chart. There is the JSX/TS

Deno 57 Jan 2, 2023
Highcharts JS, the JavaScript charting framework

Highcharts JS is a JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers. Official website: www.highcharts.com D

Highsoft 10.9k Jan 9, 2023
Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js

dc.js Dimensional charting built to work natively with crossfilter rendered using d3.js. In dc.js, each chart displays an aggregation of some attribut

null 7.4k Jan 4, 2023
:bar_chart: Declarative Charting Framework for Angular

ngx-charts Declarative Charting Framework for Angular! ngx-charts is unique because we don't merely wrap d3, nor any other chart engine for that matte

Swimlane 4.2k Dec 27, 2022
Chart.js module for charting financial securities

Chart.js Financial Charting Chart.js module for Candlestick and OHLC charts Roadmap Chart.js 2.7.0 added our timeseries scale as new option called dis

Chart.js 630 Dec 29, 2022
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

GoJS, a JavaScript Library for HTML Diagrams GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. S

Northwoods Software Corporation 6.6k Dec 30, 2022
Visualize your tech stack and database with a simple, beautiful, and interactive web app.

Stacify Visualize your tech stack and database with a simple, beautiful, and interactive web app. Why Stacify Why would you want to use Stacify? Well,

Isaiah Hamilton 1 Jan 20, 2022
Interactive visualizations of time series using JavaScript and the HTML canvas tag

dygraphs JavaScript charting library The dygraphs JavaScript library produces interactive, zoomable charts of time series: Learn more about it at dygr

Dan Vanderkam 3k Jan 3, 2023