3 Reasons Why We Shifted from JavaScript to CSS for Custom Graphs in our Web Application

Introduction

As a front-end developer, JavaScript is your best friend. It provides you with the power to create dynamic and interactive user interfaces. But, as much as we love it, there’s so much more that goes on behind the scenes than what the browser can display. There exist many JavaScript libraries that can be used for creating dynamic and interactive graphs for web applications. These JavaScript libraries are popularly called JavaScript graphing libraries. But graphs created through these libraries have some limitations and pose some problems for the web application into which they get integrated. Due to these issues, we explored alternate approaches for creating and integrating custom graphs in our web application.

As a result of this exploration, we have devised an approach that utilizes only HTML and CSS for creating a custom dynamic and interactive graph. This type of graph can be called a CSS graph. In this blog post, we will talk in brief about how to create an interactive graph using JavaScript and how to create an interactive graph using CSS. Then we’ll explore why switching to CSS was necessary for our application’s custom Graphs and how other developers can avoid such a similar situation in their projects.

How to Create a Custom Graph using JavaScript?

There are various JavaScript graphing libraries that can be used to build custom graphs for your web applications. With these libraries, you can create graphs like bar charts, line charts, scatter charts, and maps with minimal coding as many libraries already have a sample ready for most types of Graphs. We have gone through the Chart.JS graphing library for the purpose of creating a graph for our web application. This library has a sample ready for most types of graphs which can be further customized through plugins and by writing custom functions.

For a detailed guide, you can refer to our blog post on How to Create a custom graph using JavaScript libraries in which we have explained how we created a custom graph for our web application through the use of JavaScript graphing libraries.

How to Create a Custom Graph using CSS

HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages and their sub-elements. HTML provides the structure of the page and CSS provides the (visual and aural) layout. In a similar fashion, we can create a custom graph whose structure will be represented by HTML elements, and the layout and styling of the graph will be provided by CSS. This type of graph can be called a CSS graph.

For a detailed guide, you can refer to our blog post on How to create a custom graph using HTML and CSS in which we have explained how we created a custom graph for our web application by using only HTML and CSS.

3 Reasons Why We had to Shift from JavaScript to CSS for creating custom graphs

Customizability

Web applications usually possess stringent design requirements when it comes to incorporating components into their pages like having a consistent color theme, specific placement of elements, and many other design requirements so that the component can fit into the page seamlessly.

It was becoming difficult to meet some specific design needs of the graph as required by our web application when we attempted to create the graph using JavaScript graphing libraries. For example, the placement and styling of axes titles were not able to be made as per the design requirements.

CSS graph was able to overcome these shortcomings as elements styled through CSS are highly customizable and CSS graph was able to meet most of the design requirements of our web application. For example, as you can see in the above images of the CSS graph and JavaScript graph, axes titles in the CSS graph have arrow lines placed according to design requirements but this could not be implemented in the case of the JavaScript graph.

Page Speed

In today's world of lightning-fast internet speeds, page Speed has become a very important factor for consumer-facing web applications and a component that reduces page speed significantly is not suitable for integration into a web application.

JavaScript graphing libraries provide a lot of dynamic and interactive features like custom toolbars and animations to the custom graphs created using them without writing much code. But all these features come with a cost and make JavaScript graphing libraries heavy thereby reducing the load speed of rendering the custom graph on web applications. This is one of the main reasons why we had to explore some other approaches for integrating custom graphs into the web application.

CSS graph on the other hand will not affect the page speed of the web application in which it gets integrated as HTML and CSS are the basic elements of any web application and have minimal impact on the load speed of the page.

Ease of Implementation and Integration

It is fairly simple to create a graph using JavaScript graphing libraries when you just want simple data visualized through a sample pre-built graph. But as soon as you are faced with complex data that has to be presented through a custom graph having stringent design requirements, it becomes difficult to do it without having deep knowledge of JavaScript and of the specific library you have chosen for visualizing the graph. You would also need to include the chosen javascript graphing library in the script tag and the graph will be rendered either in an SVG or a canvas tag depending on the graphing library chosen. These factors make it difficult to implement and integrate a graph created using JavaScript graphing libraries into a web application.

CSS graph on the other hand is relatively easy to implement as the layout and all the styling of the graph are defined using CSS properties which are fairly simple to understand and have a plethora of web resources explaining their use. CSS graph also gets integrated into a web application seamlessly because HTML and CSS are the primary elements of a web application.

Conclusion

JavaScript Graphing libraries can be a great way to create custom graphs for your web applications. However, you have to be careful while choosing the JavaScript graphing library approach as a graph created using JavaScript graphing libraries has some critical limitations which we have discussed above while explaining the reasons why we had to shift from JavaScript to CSS for creating custom graphs in our web application.

CSS graph or a graph created using only HTML and CSS emerges as a clear winner for seamless and efficient integration into a web application due to the reasons we have discussed above.

Still, there can be scenarios where a graph created using JavaScript graphing libraries is more appropriate. You have to analyze the use case of your graph and weigh the pros and cons of using JavaScript Graphing Libraries or CSS for creating your graph.

By Hrithik Chowdhry