Some of the most common JavaScript chart libraries

Currently, data visualization has become a very important part of the field of data science. The data generated in different network systems need to be properly visualized for better presentation to the user for reading and analysis.

For any organization, the ability to fully capture data, visualize data, and analyze data can largely help to understand the underlying causes of data, so that the right decisions are made accordingly.

For front-end developers, it's a great skill to be able to master data visualization techniques in interactive Web pages. Of course, it is also easier to visualize the data on the front-end by using some JavaScript's chart library. Using these libraries, developers can easily translate data into easy-to-understand diagrams without having to consider the programming challenges of different grammars.

The following is a selection of 9 JavaScript chart libraries:

Chart.js Chartist flexchart echarts NVD3 c3.js taucharts recharts Flot

Chart.js

Chart.js is a concise, user-friendly library of charts and a HTML5-based JavaScript library for creating animated, interactive, and customizable charts and graphs.

With Chart.js, users can easily and intuitively view mixed chart types. By default, you can also use Chart.js to create responsive web pages.

The Chart.js library allows users to quickly create visual data. The chart.js is easy to set up and very friendly to beginners. With Chart.js, you do not have to consider browser compatibility issues, because Chart.js supports legacy browsers.

To install Chart.js with NPM:

NPM Install Chart.js--save

Chart.js code example for plotting a radar chart:

Const CTX = document.getElementById ("MyChart"); const options = {scale: {///hides the scale}};const data = {labels: [' Runni 　　　　　Ng ', ' swimming ', ' Eating ', ' Cycling '],datasets: [{data: [ -10, -5, -3, -15], label: ' A ', ' bordercolor: ' #ffc63b '}, {data: [5, 3,], Label: "Three", BorderColor: ' #1d9a58 '}, {data: [, 4, 2],label: "One", BorderColor: ' #d 8463c '},]}const myradarchart = new Chart (CTX, {data:data,type: ' Radar ', options:options}); Chartist

The Chartist library is ideal for creating beautiful, responsive, read-friendly charts. Chartist uses SVG to render the chart.

Chartist also provides the ability to customize a chart using CSS media queries and creative animations. Users use Chartist to implement all their ideas in a chart design.

The Chartist is easy to configure and easy to customize with Sass. However, it does not support the old browser.

With Chartist, you can beautify your SVG with CSS styles, and the user can actually think of all the chart styles they want.

To install Chartist with NPM:

NPM Install Chartist--save

Chartist code example to create a pie chart with a custom label:

var data = {Labels: [' Bananas ', ' Apples ', ' Grapes '],series: [a], 40]};var options = {labelinterpolationfnc:function (v Alue) {return Value[0]}};var responsiveoptions = [[' Screen and (min-width:640px) ', {Chartpadding:30,labeloffset:130,la Beldirection: ' Explode ', labelinterpolationfnc:function (value) {return value;}}],[' screen and (min-width:1024px) ', { Labeloffset:80,chartpadding:20}]];new Chartist.pie ('. Ct-chart ', data, options, responsiveoptions); Flexchart

Flexchart is a high-performance charting tool. With Flexchart, tabular data can easily be visualized as a business diagram. Flexchart not only supports common chart types, such as line charts, pie charts, area charts, etc., but also supports advanced chart types such as bubble charts, candlestick charts, bar graphs, and funnel charts.

Flexchart is also very simple to use, and the Flexchart diagram delegates all data-related tasks to the CollectionView class, with the ability to filter, sort, and group data by simply manipulating the CollectionView class.

Flexchart contains a comprehensive list of chart elements, table legends, chart titles, chart footers, axis axes, chart series, and labels, and users can add custom elements such as averages and trendlines to the chart.

Flexchart is essentially an interactive chart that automatically responds to any changes in the data on the chart, with the table curves zoomed in and out, filtered, drilled, animated, and so on.

View Flexchart's Chinese Learning Guide and Sun Chart demo.

Flexchart code example for drawing a histogram:

onload = function () {//Wrap data in a collectionview so the grid and chart//get Notificationsvar data = new Wijmo.colle Ctions. CollectionView (GetData ());//Create the Chartvar Thechart = new Wijmo.chart.FlexChart (' #theChart ', {itemssource:data, BINDINGX: ' Country ', series: [{binding: ' Sales ', Name: ' Sales '},{binding: ' Expenses ', Name: ' Expenses '},{binding: ' Dow Nloads ', Name: ' Downloads '}})//Create a grid to show the Datavar Thegrid = new Wijmo.grid.FlexGrid (' #theGrid ', {Itemsso Urce:data})//create some random datafunction getData () {var countries = ' us,germany,uk,japan,italy,greece '. Split (', '), data = [];for (var i = 0; i < countries.length; i++) {Data.push ({country:countries[i], sales:Math.random () * 10000, Expenses:Math.random () * Downloads:Math.round (Math.random () * 20000),}); return data;}} Echarts

Echarts is a very useful library for the data visualization of Web pages. With Echarts, developers can create intuitive, customizable, interactive charts that make data presentation and analysis easy.

Since Echarts is written in plain JavaScript, there is no problem with the echarts of other chart libraries that cannot be migrated seamlessly.

At the same time, Echarts also provides a number of official documents for users to view.

Using NPM makes it easy to complete the Echarts installation:

NPM Install Echarts--save

Echarts Plot Scatter plot code example:

var dom = document.getElementById ("container"), var mychart = Echarts.init (DOM), var app = {};option = Null;option = {title: {text: ' Large-scale scatterplot '},tooltip: {trigger: ' axis ', showdelay:0,axispointer:{show:true, type: ' Cross ', line Style: {type: ' dashed ', width:1}},zlevel:1},legend: {data:[' sin ', ' cos ']},toolbox: {show:true,feature: {mark: {s How:true}, Datazoom: {show:true}, DataView: {show:true, readonly:false}, restore: {show:true}, Saveasimage: {Show : True}}},xaxis: [{type: ' Value ', Scale:true}],yaxis: [{type: ' Value ', scale:true}],series: [{name: ' Sin ', type: ' SC Atter ', Large:true, Symbolsize:3, Data: (function () {var d = []; var len = 10000; var x = 0; while (len--) {x = (Mat  H.random () *. toFixed (3)-0; D.push ([x,//math.random () * (Math.sin (x)-X * (len% 2? 0.1: -0.1) * Math.random ()). ToFixed (3)-0]); }//console.log (d) return D; }) ()},{name: ' cos ', type: ' Scatter ', large:true, Symbolsize:2, Data: (function () {var d = []; var len = 20000; var x = 0;  while (len--) {x = (Math.random () *). ToFixed (3)-0; D.push ([x,//math.random () * (Math.Cos (x)-X * (len% 2? 0.1: -0.1) * Math.random ()). ToFixed (3)-0]); }//console.log (d) return D; })()}]};; if (option && typeof option = = = "Object") {mychart.setoption (option, true);}

NVD3

NVD3 is a D3-based JavaScript library written by Mike Bostock. NVD3 allows users to create beautiful, reusable charts in a WEB application.

The NVD3 has a powerful charting function that makes it easy to create box plots, sun shapes and candlestick charts. If users want to use a lot of ability in the JavaScript Chart library, it is recommended to try NVD3

The speed of the NVD3 Chart Library can sometimes become an issue, and it can be used more quickly with the Fastdom installation.

NVD3 drawing a simple line chart code example:

/*these lines is all chart setup. Pick and choose which chart features you want to utilize. */nv.addgraph (function () {var chart = Nv.models.lineChart (). Margin ({left:100})//adjust chart margins to give the X-ax  is some breathing.  . Useinteractiveguideline (true)//we want nice looking tooltips and a guideline!  . Transitionduration (//how) Fast do you want the lines to transition?  . ShowLegend (True)//show the legend, allowing users to turn on/off line series. . Showyaxis (True)//show the y-axis. Showxaxis (True)//show the x-axis; Chart.xaxis//chart x-axis settings. AxisLabel (' Time (ms) '). Tickformat (D3.format (', R ')); Chart.yaxis//chart y-axis settings. AxisLabel (' Voltage (v) '). Tickformat (D3.format ('. 02f ')); /* Do setting the chart up? Time to render it!*/var myData = Sinandcos ();  You need data ... d3.select (' #chart svg ')//select the <svg> element you want to render the chart in. . Datum (MyData)//populate the <svg> element with chart data .... Call (CharT); Finally, render the chart! Update the chart when window resizes. Nv.utils.windowResize (function () {chart.update ()}); return chart;});  * Simple test Data Generator */function Sinandcos () {var sin = [],sin2 = [], cos = []; Data is represented as an array of {x, y} pairs. for (var i = 0; i < i++) {Sin.push ({x:i, Y:math.sin (I/10)}), Sin2.push ({x:i, Y:math.sin (I/10) *0.25 + 0.5}); Cos.push ({x:i, y:. 5 * Math.Cos (I/10)}); }//line chart data should is sent as an array of series objects. return [{values:sin,//values-represents the array of {x, y} data points key: ' Sine Wave ',//key-the name of the SER ies. Color: ' #ff7f0e '//color-optional:choose your own line color. }, {Values:cos, key: ' cosine wave ', color: ' #2ca02c '}, {values:sin2, key: ' Another sine Wave ', color: ' #7777ff ', area : True//area-set to True if you want the line to turn into a filled area chart. } ];} C3.js

As with Taucharts, C3.js is also a very effective D3-based chart visualization library. In addition, C3.js allows users to create customizable, personal-style classes.

C3.js seems to be a difficult library, but once mastered the c3.js skills, it can be handy to use.

With the C3.js Chart library, even after the first rendering, users can update the chart by creating callbacks. C3.js also allows users to create reusable charts for their WEB applications, reducing the effort.

To install the C3.js Chart library using NPM:

NPM Install C3

C3.js code example for drawing a combo chart:

var chart = c3.generate ({data: {columns: [[' data1 ', ' + ', '], ['  data2 ', 200, 130, 90, 240, 130, [' Data3 ', ['] ', ' + ', ' 130 ', ' 120 ', ' 150 ', [  ' data4 ', ' Max ', ', '  , [' Data6 ', ' max ', ' + ', ' + ', ' + ', '  ] ', ' Type: ' Bar ', types: {  data3: ' Spline ',  data4: ' line ',  data6: ' Area ',}, Groups: [  [' data1 ', ' Data2 ']}}); Taucharts

Taucharts is one of the most flexible JavaScript chart libraries. Created based on D3, it is a data-centric JavaScript library that improves the effectiveness of data visualization.

Taucharts is very flexible and easy to access its APIs. Taucharts provides users with seamless mapping and visualization of data, using Taucharts to design a very beautiful data interface. At the same time, Taucharts is also easy to learn.

Installing Taucharts with NPM:

NPM Install Taucharts

Taucharts code example for drawing horizontal lines:

var defdata = [{"Team": "D", "Cycletime": 1, "effort": 1, "Count": 1, "Priority": "Low"}, {"Team": "D", "Cycletime": 2 , "effort": 2, "Count": 5, "priority": ' Low '}, {"Team": "D", "Cycletime": 3, "effort": 3, "Count": 8, "priority": "Med Ium "}, {" Team ":" D "," Cycletime ": 4," effort ": 4," Count ": 3," priority ":" High "}, {" Team ":" L "," Cycletime ": 2," E Ffort ': 1, ' count ': 1, ' priority ': ' low '}, {' Team ': ' l ', ' cycletime ': 3, ' effort ': 2, ' Count ': 5, ' priority ': ' Low ' }, {"Team": "L", "Cycletime": 4, "effort": 3, "Count": 8, "priority": "Medium"}, {"Team": "L", "Cycletime": 5, "effort ': 4, ' Count ': 3, ' priority ': ' High '}, {' Team ': ' K ', ' Cycletime ': 2, ' effort ': 4, ' count ': 1, ' priority ': ' low '}, {"T Eam ":" K "," Cycletime ": 3," effort ": 5," Count ": 5," Priority ":" Low "}, {" Team ":" K "," Cycletime ": 4," effort ": 6," C Ount ': 8, ' priority ': ' Medium '}, {' Team ': ' K ', ' Cycletime ': 5, ' effort ': 8, ' Count ': 3, ' priority ': ' High '}];var ch Art = new Taucharts.charT ({data:defdata, type: ' Horizontalbar ', x: ' effort ', Y: ' Team ', Color: ' priority '}), Chart.renderto (' #bar '); Recharts

Recharts is a D3-based chart library built using React.

With Recharts, users can write diagrams seamlessly in React Web applications.

The recharts is very lightweight and uses SVG elements to create very fancy charts.

To install Recharts with NPM:

NPM Install Recharts

Recharts does not have lengthy documentation, it is straightforward. When you encounter difficulties, it is easy to find a solution using Recharts.

Recharts code example to create a custom content Tree chart:

const {TREEMAP} = recharts;const data = [{name: ' axis ', children: [{name: ' Axes ', size:1302}, {name: ' axis ', s ize:24593}, {name: ' Axisgridline ', size:652}, {name: ' AxisLabel ', size:636}, {name: ' cartesianaxes ', size:670 3},],}, {name: ' Controls ', children: [{name: ' Anchorcontrol ', size:2138}, {name: ' Clickcontrol ', size:382 4}, {name: ' Control ', size:1353}, {name: ' Controllist ', size:4665}, {name: ' Dragcontrol ', size:2649}, {Name : ' ExpandControl ', size:2832}, {name: ' Hovercontrol ', size:4896}, {name: ' IControl ', size:763}, {name: ' Panzoo Mcontrol ', size:5222}, {name: ' Selectioncontrol ', size:7862}, {name: ' Tooltipcontrol ', size:8435},],}, {n  AME: ' Data ', children: [{name: ' Data ', size:20544}, {name: ' DataList ', size:19788}, {name: ' Datasprite ', size: 10349}, {name: ' Edgesprite ', size:3301}, {name: ' Nodesprite ', size:19382}, {name: ' Render ', children: [{ Name: ' Arrowtype ', size: 698}, {name: ' Edgerenderer ', size:5569}, {name: ' Irenderer ', size:353}, {name: ' Shaperenderer ', size:2247 },],}, {name: ' scalebinding ', size:11275}, {name: ' Tree ', size:7147}, {name: ' Treebuilder ', size:9930},]   ,}, {name: ' Layout ', children: [{name: ' Axislayout ', size:6725}, {name: ' Bundlededgerouter ', size:3727}, {name: ' Circlelayout ', size:9317}, {name: ' Circlepackinglayout ', size:12003}, {name: ' dendrogramlayout ', size : 4853}, {name: ' Forcedirectedlayout ', size:8411}, {name: ' Icicletreelayout ', size:4864}, {name: ' INDENTEDTR Eelayout ', size:3174}, {name: ' Layout ', size:7881}, {name: ' Nodelinktreelayout ', size:12870}, {name: ' Piela Yout ', size:2728}, {name: ' Radialtreelayout ', size:12348}, {name: ' Randomlayout ', size:870}, {name: ' Stacke Darealayout ', size:9121}, {name: ' Treemaplayout ', size:9191},],}, {name: ' Operator ', size:2490}, {name: ' Operatorlist ', size:5248}, {name: ' Operatorsequence ', size:4190}, {name: ' Operatorswitch ', size:2581}, {name: ' Sortoperator ', size:20  *},],}];const COLORS = [' #8889DD ', ' #9597E4 ', ' #8DC77B ', ' #A5D297 ', ' #E2CF45 ', ' #F8C12D '];const customizedcontent = React.createclass ({render () {const {root, depth, x, y, width, height, index, payload, colors, rank, name} = This.prop S Return (<g> <rect x={x} y={y} width={width} height={height} style={{fill:depth < 2? colors[math.floo R (Index/root.children.length * 6)]: ' None ', stroke: ' #fff ', strokewidth:2/(depth + 1e-10), strokeopacity:1/(DE  PTH + 1e-10),}}/> {depth = = = 1? <text x={x + width/2} y={y + HEIGHT/2 + 7} textanchor= "Middle" fill= "#fff" fontsize={14} > {name} </t  Ext>: null} {depth = = = 1?  <text x={x + 4} y={y + +} fill= "#fff" fontsize={16} fillopacity={0.9} > {index + 1} </text>: null} </g>); }}); const SIMPLETREEMAP = React.createclass ({rendER () {return (<treemap width={400} height={200} Data={data} datakey= "Size" RATIO={4/3} stroke= "#fff" fill= "#8884d8" Content={<customizedcontent colors={colors}/>}/>); }}) Reactdom.render (<simpletreemap/>, document.getElementById (' container '));

Flot

Currently, JQuery has become a very important tool for WEB developers. With Flot.js, the front-end design becomes even easier.

Flot.js is one of the more ancient chart libraries in the JavaScript library. However, Flot.js does not degrade its performance by drawing line charts, pie charts, bar charts, area charts, or even stacked charts.

Flot.js has a very complete documentation. When users encounter difficulties, it is easy to find a solution. Flot.js also supports older versions of browsers.

Instead of using NPM to install Flot.js, you can choose to include JQuery and JavaScript files in HTML5.

Example of a basic usage code for Flot.js:

$ (function () {var d1 = []; for (var i = 0; i <; i + = 0.5) D1.push ([I, Math.sin (i)]);  var d2 = [[0, 3], [4, 8], [8, 5], [9,]];  A null signifies separate line segments var d3 = [[0], [7,], NULL, [7, 2.5], [2.5]];  $.plot ($ ("#placeholder"), [D1, D2, D3];});

Summarize

The JavaScript libraries described above are high-quality chart libraries. However, in the course of learning these libraries may be difficult because of the steep learning curve or lack of learning materials, a good solution is to use these libraries together. Finally, you are welcome to add more JavaScript chart libraries.