Highcharts vs Plotly vs Vue.js: What are the differences?
Introduction
Highcharts, Plotly, and Vue.js are all popular frameworks used for data visualization in web applications. In this analysis, we will highlight the key differences between Highcharts and Plotly, as well as Highcharts and Vue.js.
Charting Library:
Highcharts is a JavaScript charting library that provides a wide range of customizable chart types, including line, bar, area, pie, scatter, and more. It offers comprehensive configuration options and excels in creating interactive charts with features like tooltips and zooming. On the other hand, Plotly is a JavaScript data visualization library that supports various chart types, including line, scatter, bar, pie, heatmaps, and more. It focuses on creating highly interactive and shareable visualizations. Vue.js, on the other hand, is a JavaScript framework for building user interfaces, which can be used with either Highcharts or Plotly to create data visualizations.
Integration with Frameworks:
Highcharts integrates well with various front-end frameworks like Angular, React, and Vue.js, allowing developers to easily incorporate its charts into their applications. Plotly also provides integrations, but it also has its own built-in dashboards and can be used standalone with JavaScript. In comparison, Vue.js is a complete framework that can be used with Highcharts or Plotly to build interactive and responsive data visualizations.
Customization and Configuration:
Highcharts offers an extensive API for customizing charts, including options for styling, adding annotations, and manipulating data. It provides a wide range of configuration options and can be customized at a highly granular level. Plotly, on the other hand, offers fewer customization options compared to Highcharts but makes up for it with its focus on interactivity, allowing users to zoom, pan, and hover over data points. Vue.js, being a framework, provides a flexible environment for customizing and configuring both Highcharts and Plotly visuals.
Data Handling and Visualization:
Highcharts provides a robust data handling mechanism, allowing developers to easily work with data from various sources like JSON, CSV, or live feeds. It provides built-in data preprocessing options like sorting, filtering, and aggregating data. Plotly, on the other hand, also supports easy data integration from various sources but excels in creating visualizations with real-time data and streaming updates. Vue.js acts as a facilitator in both cases and provides an easy way to work with data in Highcharts and Plotly.
Community and Support:
Highcharts has been around for a longer time and has a larger user base, hence it has a more extensive and active community. It provides comprehensive documentation, forums, and support channels for developers. Plotly, although not as mature as Highcharts, has been gaining popularity and also has an active community. Vue.js also has a strong and growing community, providing support for developers working with both Highcharts and Plotly.
Licensing and Pricing:
Highcharts offers both a free version and a commercial license for using their library. The free version has some limitations and requires attribution. Plotly, on the other hand, offers open-source libraries as well as a cloud service with different pricing plans. Vue.js is an open-source framework and is free to use. The overall offering and pricing structure differ for Highcharts, Plotly, and Vue.js.
In summary, Highcharts is a powerful, customizable, and widely-used charting library with extensive community support. Plotly, although less mature, focuses on interactivity and provides built-in dashboards. Vue.js acts as a framework that can be used with both Highcharts and Plotly to build powerful and responsive data visualizations.
Share your Stack
Help developers discover the tools you use. Get visibility for your team's tech choices and contribute to the community's knowledge.
I find using Vue.js to be easier (more concise / less boilerplate) and more intuitive than writing React. However, there are a lot more readily available React components that I can just plug into my projects. I'm debating whether to use Vue.js or React for an upcoming project that I'm going to use to help teach a friend how to build an interactive frontend. Which would you recommend I use?
Our whole Vue.js frontend stack (incl. SSR) consists of the following tools:
@{Nuxt.js}|tool:7304| consisting of @{Vue CLI}|tool:9559|, @{Vue Router}|tool:6932|, @{vuex}|tool:6705|, @{Webpack}|tool:1682| and @{Sass}|tool:1171| (Bundler for @{HTML5}|tool:2538|, @{CSS 3}|tool:6727|), @{Babel}|tool:2739| (Transpiler for @{JavaScript}|tool:1209|),
Vue Styleguidist as our style guide and pool of developed @{Vue.js}|tool:3837| components
@{Vuetify}|tool:6163| as Material Component Framework (for fast app development)
@{TypeScript}|tool:1612| as programming language
@{Apollo}|tool:5508| / @{GraphQL}|tool:3820| (incl. @{GraphiQL}|tool:7879|) for data access layer (https://apollo.vuejs.org/)
@{ESLint}|tool:3337|, @{TSLint}|tool:5561| and @{Prettier}|tool:7035| for coding style and code analyzes
@{Jest}|tool:830| as testing framework
@{Google Fonts}|tool:2652| and @{Font Awesome}|tool:3244| for typography and icon toolkit
@{NativeScript-Vue}|tool:9623| for mobile development
The main reason we have chosen Vue.js over React and AngularJS is related to the following artifacts:
Empowered HTML. Vue.js has many similar approaches with Angular. This helps to optimize HTML blocks handling with the use of different components.
Detailed documentation. Vue.js has very good documentation which can fasten learning curve for developers.
Adaptability. It provides a rapid switching period from other frameworks. It has similarities with Angular and React in terms of design and architecture.
Awesome integration. Vue.js can be used for both building single-page applications and more difficult web interfaces of apps. Smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
Large scaling. Vue.js can help to develop pretty large reusable templates.
Tiny size. Vue.js weights around 20KB keeping its speed and flexibility. It allows reaching much better performance in comparison to other frameworks.
Simple datepickers are cumbersome. For such a simple data input, I feel like it takes far too much effort. Ideally, the native input[type="date"] would just work like it does on FF and Chrome, but Safari and Edge don't handle it properly. So I'm left either having a diverging experience based on the browser or I need to choose a library to implement a datepicker since users aren't good at inputing formatted strings.
How do you recommend going about handling date and time inputs? And then there's always moment.js, but I've observed some users getting stuck when presented with a blank text field. I'm curious to hear what's worked well for people...
Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.
It is a standalone Javascript data visualization library, and it also powers the Python and R modules named plotly in those respective ecosystems (referred to as Plotly.py and Plotly.R).
It can be used to produce dozens of chart types and visualizations, including statistical charts, 3D graphs, scientific charts, SVG and tile maps, financial charts and more.
It is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.
It works in all modern mobile and desktop browsers including the iPhone/iPad and Internet Explorer from version 6;Free for non-commercial;One of the key features of Highcharts is that under any of the licenses, free or not, you are allowed to download the source code and make your own edits;Pure Javascript - Highcharts is solely based on native browser technologies and doesn't require client side plugins like Flash or Java.
Feature parity with MATLAB/matplotlib graphing; Online chart editor; Fully interactive (hover, zoom, pan); SVG and WebGL backends; Publication-quality image export
Reactivity; Components; Modularity; Animations; Routing; Stability; Extendable Data bindings; Plain JS object models; Build UI by composing components; Mix & matching small libraries
Statistics
GitHub Stars
-
GitHub Stars
17.9K
GitHub Stars
209.7K
GitHub Forks
-
GitHub Forks
1.9K
GitHub Forks
33.8K
Stacks
1.5K
Stacks
399
Stacks
55.5K
Followers
1.1K
Followers
694
Followers
44.7K
Votes
92
Votes
69
Votes
1.6K
Pros & Cons
Pros
34
Low learning curve and powerful
17
Multiple chart types such as pie, bar, line and others
13
Responsive charts
9
Handles everything you throw at it
8
Extremely easy-to-parse documentation
Cons
9
Expensive
Pros
16
Bindings to popular languages like Python, Node, R, etc
10
Integrated zoom and filter-out tools in charts and maps