Jump to content

Comparison of JavaScript charting libraries: Difference between revisions

Add links
From Wikipedia, the free encyclopedia
Browse history interactively
← Previous edit
Content deleted Content added
VisualWikitext
remove entries without articles
{{verth}}
 
Line 2: Line 2:


There are different [[JavaScript]] [[List of charting software|charting]] [[JavaScript library|libraries]] available. Below is a comparison of which features are available in each.
There are different [[JavaScript]] [[List of charting software|charting]] [[JavaScript library|libraries]] available. Below is a comparison of which features are available in each.
{{sort-under}}

{| class="wikitable sortable"
{| class="wikitable sortable sort-under"

|-
|-
! rowspan="2" | Library Name
! rowspan="2" | Library Name
Line 14: Line 13:
! colspan="2" | [[Event (computing)|Interactivity]]
! colspan="2" | [[Event (computing)|Interactivity]]
! colspan="3" | [[Rendering (computer graphics)|Rendering]] Technologies
! colspan="3" | [[Rendering (computer graphics)|Rendering]] Technologies
! Databinding
! {{verth|Databinding}}
! HTML 5 Canvas
! {{verth|HTML 5 Canvas}}

|-
|-
! [[Line chart|Line]]
! {{verth|[[Line chart|Line]]}}
! Timeline
! {{verth|Timeline}}
! [[Scatter plot|Scatter]]
! {{verth|[[Scatter plot|Scatter]]}}
! [[Area chart|Area]]
! {{verth|[[Area chart|Area]]}}
! [[Pie chart|Pie]]
! {{verth|[[Pie chart|Pie]]}}
! [[Donut chart#Doughnut chart|Donut]]
! {{verth|[[Donut chart#Doughnut chart|Donut]]}}
! [[Bullet graph|Bullet]]
! {{verth|[[Bullet graph|Bullet]]}}
! [[Radar chart|Radar]]
! {{verth|[[Radar chart|Radar]]}}
! [[Funnel chart|Funnel]]
! {{verth|[[Funnel chart|Funnel]]}}
! [[Gantt chart|Gantt]]
! {{verth|[[Gantt chart|Gantt]]}}
! [[Graph theory|Network]]
! {{verth|[[Graph theory|Network]]}}
! Grouped
! {{verth|Grouped}}
! Mind Mapping
! {{verth|Mind Mapping}}
! Stacked
! {{verth|Stacked}}
! Negative
! {{verth|Negative}}
! Discrete
! {{verth|Discrete}}
! Horizontal
! {{verth|Horizontal}}
! 3D
! {{verth|3D}}
! [[Legend (chart)|Legends]]
! {{verth|[[Legend (chart)|Legends]]}}
! Animation
! {{verth|Animation}}
! Mouse Over
! {{verth|Mouse Over}}
! onClick
! {{verth|onClick}}
! [[Canvas element|HTML5 Canvas]]
! {{verth|[[Canvas element|HTML5 Canvas]]}}
! [[Scalable Vector Graphics|SVG]]
! {{verth|[[Scalable Vector Graphics|SVG]]}}
! [[Vector Markup Language|VML]]
! {{verth|[[Vector Markup Language|VML]]}}
! [[Databinding on both AXIS x and y|AxisXY]]
! {{verth|[[Databinding on both AXIS x and y|AxisXY]]}}
! [[Web Graphics Library|WebGL rendering]]
! {{verth|[[Web Graphics Library|WebGL rendering]]}}

|-
|-
| [[AnyChart]]
| [[AnyChart]]
Line 77: Line 74:
| {{yes}}
| {{yes}}
| {{no}}
| {{no}}

|-
|-
| [[Chart.js]]
| [[Chart.js]]
Line 109: Line 105:
| {{no}}
| {{no}}
| {{no}}
| {{no}}

|-
|-
| [[Cytoscape|Cytoscape.js]]
| [[Cytoscape|Cytoscape.js]]
Line 141: Line 136:
| {{yes}}
| {{yes}}
| {{no}}
| {{no}}

|-
|-
| [[D3.js]], formerly Protovis<ref>{{citation |url=https://mbostock.github.io/protovis/ |title=Protovis is no longer under active development. |accessdate=April 8, 2014}}</ref><ref>{{citation |url=https://mbostock.github.com/d3/tutorial/protovis.html |title=For Protovis Users |accessdate=April 8, 2014 |archive-date=August 6, 2012 |archive-url=https://web.archive.org/web/20120806072124/http://mbostock.github.com/d3/tutorial/protovis.html |url-status=dead }}</ref>
| [[D3.js]], formerly Protovis<ref>{{citation |url=https://mbostock.github.io/protovis/ |title=Protovis is no longer under active development. |accessdate=April 8, 2014}}</ref><ref>{{citation |url=https://mbostock.github.com/d3/tutorial/protovis.html |title=For Protovis Users |accessdate=April 8, 2014 |archive-date=August 6, 2012 |archive-url=https://web.archive.org/web/20120806072124/http://mbostock.github.com/d3/tutorial/protovis.html |url-status=dead }}</ref>
Line 173: Line 167:
| {{yes}}
| {{yes}}
| {{no}}
| {{no}}

|-
|-
| Dojo Charting, part of [[Dojo Toolkit]]
| Dojo Charting, part of [[Dojo Toolkit]]
Line 205: Line 198:
|
|
| {{no}}
| {{no}}

|-
|-
| [[FusionCharts]]
| [[FusionCharts]]
Line 237: Line 229:
|
|
| {{no}}
| {{no}}

|-
|-
| [[Google Charts]]
| [[Google Charts]]
Line 269: Line 260:
| {{yes}}<ref>{{Cite web | url=https://developers.google.com/chart/interactive/docs/gallery/controls | title=Controls and Dashboards &#124; Charts}}</ref>
| {{yes}}<ref>{{Cite web | url=https://developers.google.com/chart/interactive/docs/gallery/controls | title=Controls and Dashboards &#124; Charts}}</ref>
| {{no}}
| {{no}}

|-
|-
| [[Raphaël (JavaScript library)|Raphaël]]
| [[Raphaël (JavaScript library)|Raphaël]]
Line 301: Line 291:
|
|
| {{no}}
| {{no}}

|-
|-
| [[Highcharts]], Highstock
| [[Highcharts]], Highstock
Line 333: Line 322:
|{{Yes}}
|{{Yes}}
|{{Yes}}
|{{Yes}}

|-
|-
| [https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/ jqxChart], part of [[JQWidgets]]
| [https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/ jqxChart], part of [[JQWidgets]]
Line 365: Line 353:
|
|
| {{no}}
| {{no}}

|-
|-
| [[plotly|plotly.js]]
| [[plotly|plotly.js]]
Line 397: Line 384:
|
|
| {{yes}}
| {{yes}}

|-
|-
| [[RGraph]]
| [[RGraph]]
Line 429: Line 415:
|
|
| {{no}}
| {{no}}

|-
|-
| [[Teechart|TeeChart JS]]
| [[Teechart|TeeChart JS]]
Line 461: Line 446:
|
|
| {{yes}}
| {{yes}}

|-
|-
| [https://visjs.org/ VisJS] - used in [[DOT_(graph_description_language)#JavaScript|d3-graphviz]]
| [https://visjs.org/ VisJS] - used in [[DOT_(graph_description_language)#JavaScript|d3-graphviz]]
Line 493: Line 477:
|
|
| {{no}}
| {{no}}

|-
|-
| [https://webix.com/widget/charts/ Webix JS Charts], part of [[Webix]]
| [https://webix.com/widget/charts/ Webix JS Charts], part of [[Webix]]
Line 525: Line 508:
| {{yes}}
| {{yes}}
| {{no}}
| {{no}}


|}
|}


Latest revision as of 13:15, 13 March 2025

There are different JavaScript charting libraries available. Below is a comparison of which features are available in each.

Library Name License Free Supported Chart Types Supported Bar Chart Types Other Features Interactivity Rendering Technologies
Databinding
HTML 5 Canvas
Timeline
Grouped
Mind Mapping
Stacked
Negative
Discrete
Horizontal
3D
Animation
Mouse Over
onClick
AnyChart Proprietary Free for education and non-profit use.[1] Paid for commercial applications.[2] Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
Chart.js MIT[3] Yes Yes Yes Yes Yes Yes Yes No Yes No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No No No
Cytoscape.js MIT[4] Yes No No No No No No No No No No Yes No No No No No No Yes Yes Yes No No Yes No
D3.js, formerly Protovis[5][6] BSD-3[7] Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes[8] Yes Yes Yes Yes Yes Yes Yes Yes No Yes[9] No Yes No
Dojo Charting, part of Dojo Toolkit BSD or AFL[10] Yes Yes No Yes Yes Yes No No No No No No Yes Yes Yes No Yes Yes Yes Yes Yes Yes Yes[11] No
FusionCharts Proprietary Free for personal and non-commercial uses.[12] Paid for commercial applications.[13] Yes [14] Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes[15] No
Google Charts Free[16] Yes[16] Yes Yes Yes Yes Yes Yes[17] No No Yes[18] Yes[19] Yes Yes Yes[20] Yes[21] Yes Yes[22] Yes Yes Yes Yes[23] Yes Yes[24] Yes[24] Yes[25] No
Raphaël MIT[26] Yes Yes No Yes No Yes No No No No No No Yes Yes No No Yes Yes Yes No No Yes[27] No No
Highcharts, Highstock Proprietary Free for personal and non-commercial uses.[28] Paid for commercial applications.[29] Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes[30] Yes Yes Yes Yes Yes Yes Yes No Yes Yes Yes Yes
jqxChart, part of JQWidgets Proprietary Free with a link [31] or commercial[32] Yes Yes Yes Yes Yes Yes Yes Yes Yes No No Yes Yes Yes Yes Yes No Yes Yes Yes Yes Yes Yes No
plotly.js MIT[33] Yes Yes Yes[34] Yes Yes Yes Yes Yes Yes Yes Yes via Python[35] Yes Yes Yes Yes Yes Yes Yes Yes Yes No Yes[36] No Yes
RGraph MIT[37] Yes Yes No Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes Yes No Yes Yes Yes Yes Yes Yes Yes No No
TeeChart JS MIT[38] Yes Yes Yes Yes Yes Yes Yes Yes Yes No Yes No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No Yes
VisJS - used in d3-graphviz Apache 2.0 and MIT[39] Yes Yes[40] Yes[41] Yes[42] Yes[43] No No No No No Yes[44] Yes[45] Yes Yes Yes No No Yes[46] Yes Yes Yes Yes No No No
Webix JS Charts, part of Webix GPL[47] Yes Yes[48] No Yes[49] Yes[50] Yes[51] Yes[51] No Yes[52] No No No Yes[53] Yes[54] Yes No Yes[54] Yes [55] Yes [56] Yes [57] Yes No Yes Yes No

See also

[edit]

References

[edit]
  1. ^ "AnyChart - Education / Non-profit licensing". AnyChart.
  2. ^ "Buy - AnyChart - JavaScript Charts designed to be embedded and integrated". AnyChart.
  3. ^ "Chart.js - Documentation". www.chartjs.org.
  4. ^ "cytoscape/cytoscape.js". GitHub.
  5. ^ Protovis is no longer under active development., retrieved April 8, 2014
  6. ^ For Protovis Users, archived from the original on August 6, 2012, retrieved April 8, 2014
  7. ^ "d3/d3". GitHub.
  8. ^ "networkD3". Christophergandrud.github.io. 2017-03-18. Retrieved 2018-07-20.
  9. ^ D3 helps you bring data to life using HTML, SVG and CSS., retrieved April 10, 2014
  10. ^ "Dojo Toolkit". dojotoolkit.org.
  11. ^ As of Dojo 1.8, the following native vector graphics engine adaptations are implemented, retrieved April 10, 2014
  12. ^ "Download FusionCharts Suite XT Personal License". www.fusioncharts.com.
  13. ^ "Buy - FusionCharts". www.fusioncharts.com.
  14. ^ "Fusion Chart Product", www.fusioncharts.com, retrieved 27 July 2018
  15. ^ JavaScript (HTML5) Charts using SVG and VML, archived from the original on April 9, 2014, retrieved April 10, 2014
  16. ^ a b "Google Charts is a free service".
  17. ^ "Visualization: Pie Chart | Charts".
  18. ^ "Gantt Charts  -  Charts  -  Google Developers". Google Developers.
  19. ^ "Gantt Charts".
  20. ^ "Visualization: Column Chart | Charts".
  21. ^ "Bar Charts".
  22. ^ the 'bars' config helps creating bars of either horizontal or vertical
  23. ^ use the 'select' event
  24. ^ a b Charts are rendered using HTML5/SVG technology to provide cross-browser compatibility (including VML for older IE versions), retrieved August 19, 2018
  25. ^ "Controls and Dashboards | Charts".
  26. ^ "The MIT License". Archived from the original on 2014-02-17. Retrieved 2014-04-07.
  27. ^ "What's the difference between Raphael and gRaphael?". Stack Overflow.
  28. ^ "FAQ". shop.highsoft.com.
  29. ^ "FAQ". shop.highsoft.com.
  30. ^ "3D column - Highcharts". www.highcharts.com.
  31. ^ "Search | com.com". Jqwidgets.com.com. Retrieved 2018-07-20.[permanent dead link]
  32. ^ "License - Javascript, HTML5, jQuery Widgets". www.jqwidgets.com.
  33. ^ plotly is free and open source, available under the MIT license., retrieved November 17, 2015
  34. ^ "Time Series".
  35. ^ "Network graph made with Python | line chart made by Priyatharsan | plotly". chart-studio.plotly.com. Retrieved 2021-08-05.
  36. ^ Code inspection on several Plotly gallery examples revealed use of SVG., retrieved April 10, 2014
  37. ^ RGraph is Free and Open Source Software using the MIT license, retrieved December 23, 2016
  38. ^ "Steema/TeeChartJS". GitHub. 20 May 2020.
  39. ^ "almende/vis". GitHub. 22 September 2022.
  40. ^ "Graph2d - Interpolation". visjs.org. Archived from the original on 2016-11-29. Retrieved 2017-01-31.
  41. ^ "Timeline - Background areas with groups". visjs.org. Archived from the original on 2016-12-24. Retrieved 2017-01-31.
  42. ^ "Graph2d - Scatterplot". visjs.org. Archived from the original on 2016-11-20. Retrieved 2017-01-31.
  43. ^ "Graph2d - Shading Example". visjs.org. Archived from the original on 2017-01-23. Retrieved 2017-01-31.
  44. ^ "Timeline - Nested Groups example". visjs.org. Archived from the original on 2017-02-23. Retrieved 2017-01-31.
  45. ^ "Network Examples". visjs.org.
  46. ^ "Graph3d Examples". visjs.org.
  47. ^ "JavaScript Charts UI Widget - Webix JS Charts". webix.com.
  48. ^ "Chart Types - Webix chart types documentation: overview and usage. Webix Docs". docs.webix.com.
  49. ^ "Chart Types - Webix chart types documentation: overview and usage. Webix Docs". docs.webix.com.
  50. ^ "Chart Types - Webix chart types documentation: overview and usage. Webix Docs". docs.webix.com.
  51. ^ a b "Chart Types - Webix chart types documentation: overview and usage. Webix Docs". docs.webix.com.
  52. ^ "Chart Types - Webix chart types documentation: overview and usage. Webix Docs". docs.webix.com.
  53. ^ "Grouping Data Items of Guides, Managing Data in a Component Webix Docs". docs.webix.com.
  54. ^ a b "Chart Types - Webix chart types documentation: overview and usage. Webix Docs". docs.webix.com.
  55. ^ "Setting Legend for a Chart of UI Widgets, Chart Webix Docs". docs.webix.com.
  56. ^ "MouseEvents of API Reference, Mixins Webix Docs". docs.webix.com.
  57. ^ "onClick of MouseEvents, Properties Webix Docs". docs.webix.com.
Retrieved from "https://en.wikipedia.org/w/index.php?title=Comparison_of_JavaScript_charting_libraries&oldid=1280248137"