About
RGraph is a JavaScript charts library based on
HTML5 SVG and canvas. RGraph is mature (over 15 years
old) and has a wealth of features making it an ideal
choice to show charts on your website.
Download
Get the latest version of RGraph (version 6.17) from
the download page. There's also older versions available,
minified files and links to cdnjs.com hosted libraries.
License
RGraph can be used for free under the GPL or if
that doesn't suit your situation there's an
inexpensive (£99) commercial license available.Sitemap
- Website pages
- Installation documentation
- SVG chart types
- SVG HOWTO documents
- Other SVG documentation
- Canvas chart types
- Canvas based HOWTO tutorials
- Other canvas documentation pages
- The canvas drawing API
- A canvas reference
- The RGraph blog
- The RGraph release notes
- Demos of RGraph charts
- Video tutorial and walk-through transcripts
- Other pages
Website pages
Installation documentation
SVG chart types
- SVG Activity meter API reference
- SVG Bar chart API reference
- SVG Bipolar chart API reference
- SVG Funnel chart API reference
- SVG Gauge chart API reference
- SVG Horizontal Bar chart API reference
- SVG Horseshoe meter API reference
- A Horizontal Progress bar using the Horizontal Bar chart
- SVG Line chart API reference
- SVG Pie chart API reference
- SVG Radar chart API reference
- SVG Rose chart API reference
- SVG Scatter chart API reference
- SVG Segmented donut chart API reference
- SVG Semi-circular Progress bar API reference
- A Vertical Progress bar created using the Bar chart
- SVG Waterfall chart API reference
SVG HOWTO documents
- How to use the background layers
- How to make a dual-color Line chart
- How to make formatting strings easier
- How to use global configuration values
- HOWTO guides
- How to turn a label into a link (SVG version)
- How to create a Horizontal or Vertical Progress bar
- How to create a stacked and grouped Bar chart
- How to use the RGraph.SVG.text.find() function
Other SVG documentation
Canvas chart types
- Activity meter API reference
- Bar chart API reference
- Bipolar chart API reference
- Donut chart API reference
- Fuel Gauge API reference
- Funnel chart API reference
- Gantt chart API reference
- Gauge chart API reference
- Horizontal Bar chart API reference
- Horseshoe meter API reference
- Line chart API reference
- Meter chart API reference
- Odometer chart API reference
- Pie chart API reference
- Radar chart API reference
- Rose chart API reference
- Radial scatter chart API reference
- Scatter chart API reference
- Segmented donut chart API reference
- Semi-circular Progress Bar API reference
- Thermometer chart API reference
- Vertical Progress bar API reference
- Waterfall chart API reference
Canvas based HOWTO tutorials
- How to get angled labels that follow your line
- How to use CSS3 animations
- How to get crisp lines on your canvas
- How to create a combined Bar, Line and Pie chart
- How to create a combined Bar and Vertical Progress bar chart
- How to use CSS3 transitions
- How to make your line clickable
- How to make a Contract/Expand transition effect
- How to use DOM1 custom events
- How to display date/time values on a Scatter chart
- How to debug your charts with Google Chrome
- How to use the dollar syntax for events
- How to dynamically add points to your Line chart
- How to add events to your charts
- How to use repeating canvas patterns
- How to create a floating progress bar
- How to create a Gauge that updates a form
- How to create a bank of Gauge charts
- How to use gradients
- How to use CSS3 gradients
- How to highlight a bar on your chart
- How to use images as your tickmarks
- How to make your line clickable (isPointInStroke)
- How to create a multi-color (based on arbitrary thresholds) Line chart
- How to turn a label into a link (canvas version)
- How to add links to your charts
- How to add the ModalDialog to your charts
- How to create a multi-chart scrolling effect with CSS transitions
- How to create a chart with PhantomJS
- How to get rounded corners on a Bar chart
- How to make a scrolling Line chart
- How to make a scrolling Line chart
- How to create a Bar chart that's capable of multiple select
- How to use CSS3 transitions to save space
- How to create plus/minus Bar charts and Spark lines
- How to show a custom static Y-axis
- How to create a CSS3 transitions based switch effect
- How to use the RGraph.text() API function
- How to use custom tickmarks in your charts
- How to create one-touch Line chart adjusting
- How to use CSS 3D transformations
- How to make a transition effect
- How to use AJAX to update charts
Other canvas documentation pages
- 3D charts
- Using accessible text
- Adjusting your charts
- The simplified AJAX functions
- The animate() function
- How you can annotate your charts interactively
- API documentation
- Asynchronous charts
- Types of canvas based charts
- Using the new clipping feature to easily make combined charts
- HTML5 canvas colors
- Combining charts
- Backwards compatibility
- Context menus
- CSS classes
- Importing data from a CSV file
- Custom events
- What is the DOMContentLoaded event?
- Animation and visual effects
- Events documentation
- The exec function
- Features documentation
- Index of howto guides
- Horizontal Progress bars API reference
- Using HTML keys
- Canvas documentation
- Ingraph labels
- Integrating with external libraries
- Using keys or legends
- The filledAccumulative Line chart setting
- A tool that will help with margin sizing
- Miscellaneous information
- Miscellaneous documentation
- Retrieving a PNG
- Pseudo-standard events
- Accessing query string data
- The responsive function
- Importing data from Google Sheets
- A rotating StarBurst effect
- Importing data from an HTML table
- Information about the text configuration option
- Using tooltips
- Updating your charts dynamically
- Fetching data from an XML file
The canvas drawing API
- The drawing API background object
- The drawing API Circle object
- The drawing API Image object
- The drawing API
- The drawing API Line object
- The drawing API Marker1 object
- The drawing API Marker2 object
- The drawing API Marker3 object
- The drawing API Poly object
- The drawing API Rect object
- The drawing API Text object
- The drawing API X-axis object
- The drawing API Y-axis object
A canvas reference
- Canvas reference: The arc() function
- Canvas reference: The arcTo() function
- Canvas reference: The beginPath() function
- Canvas reference: The bezierCurveTo() function
- Canvas reference: The canvas element
- Canvas reference: The clearRect() function
- Canvas reference: The clip() function
- Canvas reference: The closePath() function
- Canvas reference: The createImageData() function
- Canvas reference: How to use the canvas drawImage() function
- Canvas reference: The ellipse() function
- Canvas reference: The fill() function
- Canvas reference: The fillRect() function
- Canvas reference: The fillStyle property
- Canvas reference: The fillText() function
- Canvas reference: The font property
- Canvas reference: The getContext() function
- Canvas reference: The getImageData() function
- Canvas reference: The getLineDash() function
- Canvas reference: The globalAlpha property
- Canvas reference: The globalCompositeOperation property
- Canvas reference: The imageData object
- HTML5 canvas reference
- Canvas reference: The isPointInPath() function
- Canvas reference: The isPointInStroke() function
- Canvas reference: Linear gradients
- Canvas reference: The lineCap property
- Canvas reference: The lineDashOffset property
- Canvas reference: The lineJoin property
- Canvas reference: The lineTo() function
- Canvas reference: The lineWidth property
- Canvas reference: The measureText() function
- Canvas reference: The moveTo() function
- Canvas reference: The Path2D object
- Canvas reference: The createPattern() function
- Canvas reference: The putImageData() object
- Canvas reference: The quadraticCurveTo() function
- Canvas reference: Radial gradients
- Canvas reference: The rect() function
- Canvas reference: The restore() function
- Canvas reference: The rotate() function
- Canvas reference: The save() function
- Canvas reference: The scale() function
- Canvas reference: The setLineDash() function
- Canvas reference: The setTransform() function
- Canvas reference: The shadowBlur property
- Canvas reference: The shadowColor property
- Canvas reference: The shadowOffsetX property
- Canvas reference: The shadowOffsetY property
- Canvas reference: The stroke() function
- Canvas reference: The strokeRect() function
- Canvas reference: The strokeStyle property
- Canvas reference: The strokeText() function
- Canvas reference: The textAlign property
- Canvas reference: The textBaseline property
- Canvas reference: The toDataURL() function
- Canvas reference: The transform() function
- Canvas reference: The translate() function
The RGraph blog
- 10 example charts to get started
- News and updates for 2015
- News and updates for 2017
- News and updates for 2018
- News and updates for 2019
- News and updates for 2020
- News and updates for 2021
- News and updates for 2022
- News and updates for 2023
- How to add "Copy to clipboard" buttons to your code examples
- Walk-through of a 100% Bar chart
- Walk-through of a basic Bar chart
- Walk-through of a dark-themed Line chart
- Walk-through of a Funnel chart demo
- Walk-through of a Horizontal Bar chart smoothed vertical line demo
- News and updates for 2024
- 9 Good looking charts
- Spotlight on the AJAX functions
- Spotlight on the CSV connector
- Dotted and dashed lines on canvas
- An example of drag and drop between canvas tags
- Examples of infographic charts
- Measuring text height using DOM elements
- The new features of the canvas v5 specification
- The prototypal JavaScript object model
- A description of Path2D objects
- SVG paths for canvas
- Why should I use semi-colons after functions
- Spotlight on the Google Sheets connector
The RGraph release notes
Demos of RGraph charts
- RGraph demo: A 3D Bar chart with multiple rows
- RGraph demo: A customised and adjustable Bar chart
- RGraph demo: A Bar chart using AJAX
- RGraph demo: A basic Bar chart
- RGraph demo: A Bar chart with a dark background
- RGraph demo: A Bar chart showing Google's power usage
- RGraph demo: Favourite dog breeds
- RGraph demo: An example of how to use images as labels
- RGraph demo: An example of a Bar chart with an interactive key
- RGraph demo: Bar and Line charts with a switch effect
- RGraph demo: A demo of a logarithmic Bar chart
- RGraph demo: A Bar that looks like the millionaire bar chart
- RGraph demo: A Bar/Line chart using a negative horizontal margin
- RGraph demo: A Bar chart showing new car registrations in the UK, 2010-2016
- RGraph demo: A customised adjustable Bar chart
- RGraph demo: A Bar chart with post-processing
- RGraph demo: A Bar chart with a rotating background on dual canvas tags
- RGraph demo: A segmented Bar chart
- RGraph demo: Things to release at a wedding
- RGraph demo: A 3D Donut chart
- RGraph demo: A nested Donut chart progress bar
- RGraph demo: A segmented Donut chart
- RGraph demo: A Line chart with multiple datasets tracing sequentially
- RGraph demo: A Line chart using the animationTraceCenter option
- RGraph demo: A customised Gauge chart
- RGraph demo: A Horizontal Bar chart showing popularity of languages
- RGraph demo: A Horizontal Bar chart using the CSV reader
- RGraph demo: A Horizontal Bar chart using formatted tooltips
- Demos of charts
- RGraph demo: A black and purple combined Bar and Line chart
- RGraph demo: A black Line chart
- RGraph demo: A Line chart using the CSV reader
- RGraph demo: A Line chart showing employee sales
- RGraph demo: A Line chart using the Google Sheets connector
- RGraph demo: An adjustable black Meter chart
- RGraph demo: An adjustable Meter that looks like the Google charts Meter
- RGraph demo: A Pie chart that retrieves JSON data via AJAX
- RGraph demo: A basic Pie chart
- RGraph demo: A grey Pie chart
- RGraph demo: A horseshoe Pie chart
- RGraph demo: A pink Pie chart
- RGraph demo: A progress-bar Pie/Donut chart
- RGraph demo: A non-filled Radar chart
- RGraph demo: A 3D rose chart
- RGraph demo: A basic Rose chart
- RGraph demo: A Radial Scatter chart using the CSV reader
- RGraph demo: A Scatter chart using date/time values
- RGraph demo: A vertical line chart
- RGraph demo: The earnings of Britain's top paid boss
- RGraph demo: A dark and graduated blue Bar chart
- RGraph demo: A combined Bar and Line chart
- RGraph demo: An SVG Funnel chart showing the key stages of plan CD1
- RGraph demo: An SVG Horizontal Bar chart showing income for Star Tech
- RGraph demo: A black and orange SVG Horizontal Bar chart
- RGraph demo: An SVG Horizontal Bar chart that's useful for an infographic
- RGraph demo: A mock-up of a Google Analytics style dashboard.
- RGraph demo: An SVG black and white Line chart
- RGraph demo: A predominantly Line chart based status dashboard
- RGraph demo: An SVG dynamically updating SVG Line chart
- RGraph demo: An SVG Line chart using the trace() effect
- RGraph demo: An SVG Line chart using transparency
- RGraph demo: An SVG version of an older filled demo chart
- RGraph demo: An SVG Line with a simple look and feel
- RGraph demo: A Line chart with a highlighted section
- RGraph demo: An SVG Line chart inspired by a chart on the NVD website
- RGraph demo: A graduated Line using the trace effect
- RGraph demo: An SVG Line chart showing revenue over time
- RGraph demo: A mixed Line/spline chart and a Bar chart
- RGraph demo: An SVG Line chart showing UFO sightings over the past century.
- RGraph demo: SVG Pie charts that are configured to look like meters
- RGraph demo: An SVG Pie chart configured to look like a Meter
- RGraph demo: An SVG Pie chart using the Google Sheets connector
- RGraph demo: An SVG stacked Rose chart with unequal segment sizes
Video tutorial and walk-through transcripts
- Walk-through of a Bar chart that has vertical borders on the bars
- Walk-through of a significantly customised Bar chart
- Walk-through of a dynamically scrolling dual-color Line chart
- A description of how to use the new, version 6.17, clip property
- How to use the responsive function in RGraph
- How to add "Copy to clipboard" buttons to your code examples
- Walk-through of a Funnel chart demo
- Walk-through of a Horizontal Bar chart smoothed vertical line demo
- Walk-through of a dark-themed Line chart
- Walk-through of a 100% Bar chart
- Walk-through of a basic Bar chart