The RGraph logo RGraph: Beautiful Javascript charts for the web

Beautiful javascript charts for websites

Fast, functional, pretty JavaScript charts for everyone



Advantages of using RGraph

  • Open Source license (MIT)
  • 50+ SVG and canvas charts
  • Responsive charts
  • Very customisable
  • Integrates into your site easily
  • 300+ pages of documentation
  • 700+ demo pages
  • Support direct from the author
  • Established since 2008


RGraph is Open Source and uses the MIT licence
MIT License
RGraph uses the MIT license so it's completely free
RGraph uses HTML5 canvas and SVG
HTML5 tech
RGraph uses HTML5 SVG, canvas and JavaScript
Over 50 types of charts
50+ charts
RGraph has lots of charts and features



Easily connect to your data

How would I connect to a CSV file on my website?
Docs | Code
How would I get data from a Google Sheets spreadsheet?
Docs | Code
How would I get data via AJAX?
Docs | Code
How would I get information from a database?
Docs | Code



Examples of charts

Click on each example to go to the full demo page. See all of the examples...

RGraph can make realistic looking 3D Bar charts. This demo is a multi-row example of such a chart. There are three rows of bars which are animated sequentially.A Bar chart with a dark theme. It illustrates how versatile RGraph can be when you're configuring your charts.There are numerous ways of switching between charts - some of which have examples in the download archive. This is a nice example of a CSS transition.A combined Bar and Line chart using a negative horizontal margin. This gives the bars on the chart an overlapping appearance.A grouped Bar chart showing motor vehicle sales which has three bars per group along with a turquoise color theme.A Bar chart that shows you that by using the draw event along with the coordinates you can do post-processing on your charts.A bar chart using two canvas tags and on the rear there's a rotating starburst effect. Because the StarBurst is on a different canvas the bar chart doesn't need to be constantly redrawn.A Bar  chart using two canvas tags to achieve a segmented effect to it. The background grid is drawn on the rear canvas and the bars on the front canvas.A variant of the Bar chart is to have it drawn in a sketchy, freehand style. Here's an example depicting bad things to release at a wedding!A variation of the Pie and Donut chart is to have it drawn in a 3D style. Here's an example of what to expect to see.A segmented (done by using the draw event) Donut chart that uses the roundRobin() effect, and which could act as a very effective meter.A Line chart with multiple datasets which are tracing sequentially from the left-hand-side.A demonstration of the animationTraceCenter option which alters the behaviour of the trace() effect so that the tracing starts in the middle instead of on the left.A Gauge chart that has been customised to look quite different from what is the default appearance.An example of a Horizontal Bar chart that's showing the result of the 2016 UK referendum that decided the question of EU membership.A Line chart showing multiple datasets and which has a dark color scheme. It also has a key and clears the canvas before it starts drawing.A Line chart using the Google Sheets connector. If you use Google Sheets to store your data then RGraph can connect directly to Google to retrieve your data.A Meter chart customised to look like the Google charts Meter. It's been made to be dynamically adjustable so you can click on the chart to set the value.A basic Pie chart which has a large first segment and which uses the roundRobin() effect. The curvy sticks for labels are now the default (they didn't used to be).A Pie/Donut chart that's using the dedicated RGraph.Horseshoe class in order to make it appear as a circular meter.A non-filled Radar chart with two data series. The Radar chart can be used to show a dataset where the magnitude of each point relative to the others is important.A 3D Rose chart. The 3D Rose chart has a nice aesthetic to it and could work well as part of a presentation.An SVG Bar chart showing the earnings of Britain's highest paid boss. As you can see there's quite a jump up to £199m. A good year!A grouped Bar chart with an overlaid filled Line chart. It also has the labelsAbove option enabled so you get indications of each points value.An SVG Funnel chart showing the key stages of plan CD1. It takes a little bit of configuration to get the default Funnel to look like this - but it's all on this page.A black and orange SVG Horizontal Bar chart which uses two Horizontal Bar objects in order to provide the gray backgrounds to the bars.An SVG black and white Line chart which is simple in appearance but is aesthetically pleasing. It has a little bit of custom drawing too.A dynamically updating SVG Line chart. It's aesthetically quite simple in order to keep the frame up and the movement smooth.An SVG version of an older filled spline Line chart. The chart uses gradients as the fill colors. There's also a key defined.An SVG Line chart that was inspired by a chart on the NVD website. The 'floating' appearance is done by setting the first color for the first dataset to transparent.An SVG Line chart showing revenue over time. This example shows that a chart doesn't have to be complicated to be attractive.Here's a demo of a mixed Line and a Bar chart (with dummy data). There's a spline and also an angular line on the chart.An SVG Line chart showing UFO sightings over the past century. As you can see peoples imagination is increasing!An SVG stacked Rose chart with unequal segment sizes. This variation (non-equi-angular + stacked) is only supported by the SVG Rose chart.A sketchy variation of a Bar chart that's showing that the French Mastiff dog breed is far and away the best dog breed!As well as text labels you can configure RGraph to show images as labels on your chart. This may help the readability of your chart.

See all examples...


Back to the top of the page
Back to the top