Share 10+ visual chart libraries to help you easily create beautiful large visual screens

foreword

Visual charts are often involved in the process of developing visualization projects. Many cool reports and large screens we see use a lot of charts. Next, I will share with you some popular open source and free chart libraries.

Source: Fun talk front-end public account

github: https://github.com/MrXujiang

1.D3.js

D3Full name (Data-Driven Documents), a data-driven chart library. JavaScriptDeveloped by , it can greatly reduce our workload, especially in data D3visualization. It can simplify the complex steps of generating visualization to a few simple functions. We only need to input a few simple data to convert to various A gorgeous graphic.

Next, let's take a look at a case of using it to implement a histogram:

code show as below:

chart = BarChart(alphabet, {
  x: d => d.letter,
  y: d => d.frequency,
  xDomain: d3.groupSort(alphabet, ([d]) => -d.frequency, d => d.letter), // sort by descending frequency
  yFormat: "%",
  yLabel: "↑ Frequency",
  width,
  height: 500,
  color: "steelblue"
})

We can implement a simple chart very efficiently, and we can also use to D3implement a complex visual chart:

If you are interested, you can refer to it.

github address : https://github.com/d3/d3

2. ApexCharts

ApexChartsis a neat SVGcharting library with Vueand Reactwrappers . It works very silky-smoothly on different devices and comes with detailed documentation. ApexChartsis an MIT-licensed open source project that can be used in commercial and non-commercial projects.

Next, share some of the charts it provides:

Analysis Radar:

Statistical Analysis:

At present, mainstream frameworks such as vue, angular, reactand so on are supported, and the versatility is still very good. If you are interested, you can refer to it.

github address : https://gitee.com/mirrors/ApexChartsJS

3. Chart.js

Chart.jsis a very popular open source library with more than 60,000+ GitHubon star. Flexible and lightweight, allowing us to build responsive charts using HTML5 Canvasthe element . Line charts and bar charts can be easily mixed and matched to combine different data sets for very interesting features, support vueand react.

Next, let's look at the configuration that uses it:

const config = {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Chart.js Bar Chart'
      }
    }
  },
};

Line chart example:

Radar chart:

If you are interested, you can refer to it.

github address : https://github.com/chartjs/Chart.js

4. AntV

AntVThe design principles of data visualization are Ant Designderived from the design system and have the guiding principles of data visualization characteristics. While adhering to Ant Designthe design further interprets the field of data visualization, such as color palettes and font guidelines.

AntVAfter a lot of actual project experience, four core principles are summarized: accuracy, clarity, effectiveness, and beauty. These four principles are sorted in order of importance, complement each other and present a progressive relationship.

Let's take a look at the chart examples it provides:

If you are interested, you can refer to it.

github address : https://github.com/antvis

5. Echarts

Apache EChartsIt is an open source visual chart library JavaScriptbased , which has many built-in visual chart libraries, including commonly used column charts, pie charts, line charts, etc., as well as a lot of 3D components, as follows:

If you are interested, you can refer to it.

github address : https://github.com/apache/echarts

6. Level

Nivois D3a Reactbeautiful visual chart framework based on and , providing fourteen different types of components to present chart data.

NivoMany customization options and three rendering options are available: Canvas, SVG, and even based APIon HTML. It's very well documented, Democonfigurable and a lot of fun. This is a high-level library that is very easy to use. Next, share a few chart examples:

Code example:

import { ResponsiveBar } from '@nivo/bar'

const MyResponsiveBar = ({ data /* see data tab */ }) => (
    <ResponsiveBar
        data={data}
        keys={[
            'hot dog',
            'burger',
            'sandwich',
            'kebab',
            'fries',
            'donut'
        ]}
        indexBy="country"
        margin={
    
    { top: 50, right: 130, bottom: 50, left: 60 }}
        padding={0.3}
        valueScale={
    
    { type: 'linear' }}
        indexScale={
    
    { type: 'band', round: true }}
        colors={
    
    { scheme: 'nivo' }}
        borderColor={
    
    {
            from: 'color',
            modifiers: [
                [
                    'darker',
                    1.6
                ]
            ]
        }}
        axisTop={null}
        axisRight={null}
        axisBottom={
    
    {
            legend: 'country',
            legendPosition: 'middle',
            legendOffset: 32
        }}
        axisLeft={
    
    {
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
            legend: 'food',
            legendPosition: 'middle',
            legendOffset: -40
        }}
        labelSkipWidth={12}
        labelSkipHeight={12}
        labelTextColor={
    
    {
            from: 'color',
            modifiers: [
                [
                    'darker',
                    1.6
                ]
            ]
        }}
        role="application"
        ariaLabel="Nivo bar chart demo"
        barAriaLabel={function(e){return e.id+": "+e.formattedValue+" in country: "+e.indexValue}}
    />
)

If you are interested, you can refer to it.

github address : https://github.com/plouc/nivo

7. dygraphs

Dygraphsis an open source JSlibrary ; used to generate user-interactive, zoomable time charts. It is mainly used to display dense data collections, and users can browse and view data well.

Next, share a few chart examples:

If you are interested, you can refer to it.

github address : https://github.com/danvk/dygraphs

8. Protovis

ProtovisIt is a visual javaScriptchart generation tool, the case is as follows:

Bubble chart:

Code example:

/* Sizing and scales. */
var w = 400,
    h = 250,
    x = pv.Scale.linear(0, 1.1).range(0, w),
    y = pv.Scale.ordinal(pv.range(10)).splitBanded(0, h, 4/5);

/* The root panel. */
var vis = new pv.Panel()
    .width(w)
    .height(h)
    .bottom(20)
    .left(20)
    .right(10)
    .top(5);

/* The bars. */
var bar = vis.add(pv.Bar)
    .data(data)
    .top(function() y(this.index))
    .height(y.range().band)
    .left(0)
    .width(x);

/* The value label. */
bar.anchor("right").add(pv.Label)
    .textStyle("white")
    .text(function(d) d.toFixed(1));

/* The variable label. */
bar.anchor("left").add(pv.Label)
    .textMargin(5)
    .textAlign("right")
    .text(function() "ABCDEFGHIJK".charAt(this.index));

/* X-axis ticks. */
vis.add(pv.Rule)
    .data(x.ticks(5))
    .left(x)
    .strokeStyle(function(d) d ? "rgba(255,255,255,.3)" : "#000")
  .add(pv.Rule)
    .bottom(0)
    .height(5)
    .strokeStyle("#000")
  .anchor("bottom").add(pv.Label)
    .text(x.tickFormat);

vis.render();

If you are interested, you can refer to it.

github address : https://github.com/protovis

9. Recharts

RechartsThe meaning is to redefine (Redefined) chart. The reason behind this name is that the design of this chart brings a different experience to developers, not only in Reactdesign , but also in redefining the way of combination and configuration. Next, let's take a look at the chart examples it provides:

We can see that it is reactwritten , and the writing method is very simple.

If you are interested, you can refer to it.

github address : https://github.com/recharts/recharts

10. hitting charts

Frappe ChartsIt is a free, open-source, lightweight and non-dependent webchart library, simple and not bloated, and supports Vue / Reactthe use of frameworks such as collocation. Next, I will share a few chart examples with you:

pie chart: