chartist README

The project's README from github.com/chartist-js/chartist. As one markdown file: README.md.

Big welcome by the Chartist Guy

NPM version Downloads Build status Coverage status Bundle size Join the chat at https://gitter.im/gionkunz/chartist-js

The Chartist Guy

Chartist is a simple responsive charting library built with SVG. There are hundreds of nice charting libraries already out there, but they are either:

That's why we started Chartist and our goal is to solve all of the above issues.

Quickstart   •   What is it made for?   •   What's new in v1?   •   Docs   •   Examples   •   Contribution

Quickstart

Install this library using your favorite package manager:

pnpm add chartist
# or
yarn add chartist
# or
npm i chartist

Then, just import chart you want and use it:

import { BarChart } from 'chartist';

new BarChart('#chart', {
  labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
  series: [
    [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
  ]
}, {
  high: 10,
  low: -10,
  axisX: {
    labelInterpolationFnc: (value, index) => (index % 2 === 0 ? value : null)
  }
});

Need an API to fetch data? Consider Cube, an open-source API for data apps.


supported by Cube

What is it made for?

Chartist's goal is to provide a simple, lightweight and unintrusive library to responsively craft charts on your website. It's important to understand that one of the main intentions of Chartist is to rely on standards rather than providing it's own solution to a problem which is already solved by those standards. We need to leverage the power of browsers today and say good bye to the idea of solving all problems ourselves.

Chartist works with inline-SVG and therefore leverages the power of the DOM to provide parts of its functionality. This also means that Chartist does not provide it's own event handling, labels, behaviors or anything else that can just be done with plain HTML, JavaScript and CSS. The single and only responsibility of Chartist is to help you drawing "Simple responsive Charts" using inline-SVG in the DOM, CSS to style and JavaScript to provide an API for configuring your charts.

Plugins

Coming soon.

For v0.11

Some features aren't right for the core product but there is a great set of plugins available which add features like:

and more.

See all the plugins here.

Contribution

We are looking for people who share the idea of having a simple, flexible charting library that is responsive and uses modern and future-proof technologies. The goal of this project is to create a responsive charting library where developers have their joy in using it and designers love it because of the designing flexibility they have. Please contribute to the project if you like the idea and the concept and help us to bring nice looking responsive open-source charts to the masses.

Contribute if you like the Chartist Guy!

chartist (chartist-js/chartist)

Searching Database…

13.4K ·GitHub
Chartist
这是什么？Chartist 是一个简单、自适应的 Web 图表库，基于内联 SVG 而不是 canvas 实现。
它是框架，还是纯粹的绘图库？它是一个轻量级的 JavaScript/TypeScript 库，不是框架。它使用 DOM 中的内联 SVG 绘制图表，样式和事件则依靠普通的 CSS/JS 实现，而不是重新造轮子。
我要怎么把它加到项目里？用你习惯的包管理器安装（例如 npm），然后导入需要的图表类型，直接在代码中使用即可。
要把数据放进图表，我需要额外的工具或后端吗？库本身不需要特别的依赖，它列出的运行时依赖为零。如果需要数据接口，README 建议可以选用开源的 Cube 作为可选项。
目前核心库缺少哪些功能？坐标轴标签、工具提示和按阈值着色等功能并未内置在 Chartist 核心中，而是通过单独的插件提供。
这个库面向哪些人？面向希望做出自适应图表、又不想要 canvas 那样臃肿的 Web 开发者，以及希望通过 CSS 轻松控制视觉效果的设计师。
为什么用 Chartist，而不用基于 canvas 的图表库？基于 canvas 的图表库通常更重，样式上也不够灵活。Chartist 使用内联 SVG，你可以用普通 CSS 设置图表样式，也可以直接操作 DOM，从而避开作者批评的其他方案中那种“选错了技术”和臃肿的问题。
我能给 Chartist 扩展工具提示之类的功能吗？可以。坐标轴标签、工具提示和基于阈值的着色等功能，可以通过单独的插件生态获得，而不是核心库自带。
Chartist 适合做响应式或移动端友好的仪表盘吗？适合。响应式是其核心设计目标，库名和描述都强调图表要能适应所在的容器。
What are similar projects?d3, G2, Chart.js, plotly.js, apexcharts.js, recharts, highcharts, vue-echarts
Which topics is it in?charting-library, chart, svg, visualization, data-visualization, css, dashboard, html, npm, frontend, library, typescript
Creator
chartist-js
Size
21.5 MB
Stars
13.4K
Updated
CommitOct 16Releasev2.0.0Oct 16
Age
12y
Commits · 90 Days