DEV Community

Cover image for CSS Charts/Graphs
Anjali Jha
Anjali Jha

Posted on

CSS Charts/Graphs

I have recently learnt how to add graphs and charts to websites. It helps to keep your data representation organized, presentable and easy to comprehend. One of the easiest method of doing so is through Google Charts.

To get started-

  1. Visit https://developers.google.com/chart.
  2. Navigate to guide section and then select chart gallery. You will be presented with different kinds of maps to choose from.
  3. Choose the map of your choice and head into it's code description.
  4. Copy the script section to the head section of your HTML. Also copy the div in the body section of the code description to specify the dimensions.
  5. That's it, you have now added a graph to your HTML file. You can customize it by changing the parameters and the content of the graph to suit your needs. Example-

You can also modify it to 3D, rotating, donut and can add various other properties.
Hope it helps!

pic

Top comments (1)

Collapse
 
ramiyushuvaev profile image
Rami Yushuvaev

its js charts, for css charts see chartscss.org