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 use for showing charts on your website.
Download
Get the latest version of RGraph (version 6.18, 1st June 2024) from
the download page. You can read the changelog here. 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 (£129) commercial license available.Sitemap
- Website pages
- Installation documentation
- SVG chart types
- SVG HOWTO documents
- Other SVG documentation
- Canvas API references
- 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
- Activity meter
- Bar chart
- Bipolar chart
- Funnel chart
- Gauge chart
- Horizontal Bar chart
- Horseshoe meter
- A Horizontal Progress bar using the Horizontal Bar chart
- Line chart
- Pie chart
- Radar chart
- Rose chart
- Scatter chart
- Segmented donut chart
- Semi-circular Progress bar
- A Vertical Progress bar created using the Bar chart
- Waterfall chart
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 API references
- Activity meter
- Bar chart
- Bipolar chart
- Donut chart
- Fuel Gauge
- Funnel chart
- Gantt chart
- Gauge chart
- Horizontal Bar chart
- Horseshoe meter
- Line chart
- Meter chart
- Odometer chart
- Pie chart
- Radar chart
- Rose chart
- Radial scatter chart
- Scatter chart
- Segmented donut chart
- Semi-circular Progress Bar
- Thermometer chart
- Vertical Progress bar
- Waterfall chart
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
- 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
A canvas reference
- The arc() function
- The arcTo() function
- The beginPath() function
- The bezierCurveTo() function
- The canvas element
- The clearRect() function
- The clip() function
- The closePath() function
- The createImageData() function
- How to use the canvas drawImage() function
- The ellipse() function
- The fill() function
- The fillRect() function
- The fillStyle property
- The fillText() function
- The font property
- The getContext() function
- The getImageData() function
- The getLineDash() function
- The globalAlpha property
- The globalCompositeOperation property
- The imageData object
- HTML5 canvas reference
- The isPointInPath() function
- The isPointInStroke() function
- Linear gradients
- The lineCap property
- The lineDashOffset property
- The lineJoin property
- The lineTo() function
- The lineWidth property
- The measureText() function
- The moveTo() function
- The Path2D object
- The createPattern() function
- The putImageData() object
- The quadraticCurveTo() function
- Radial gradients
- The rect() function
- The restore() function
- The rotate() function
- The save() function
- The scale() function
- The setLineDash() function
- The setTransform() function
- The shadowBlur property
- The shadowColor property
- The shadowOffsetX property
- The shadowOffsetY property
- The stroke() function
- The strokeRect() function
- The strokeStyle property
- The strokeText() function
- The textAlign property
- The textBaseline property
- The toDataURL() function
- The transform() function
- 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
- A 3D Bar chart with multiple rows
- A customised and adjustable Bar chart
- A Bar chart using AJAX
- A basic Bar chart
- A Bar chart with a dark background
- A Bar chart showing Google's power usage
- Favourite dog breeds
- An example of how to use images as labels
- An example of a Bar chart with an interactive key
- Bar and Line charts with a switch effect
- A demo of a logarithmic Bar chart
- A Bar that looks like the millionaire bar chart
- A Bar/Line chart using a negative horizontal margin
- A Bar chart showing new car registrations in the UK, 2010-2016
- A customised adjustable Bar chart
- A Bar chart with post-processing
- A Bar chart with a rotating background on dual canvas tags
- A segmented Bar chart
- Things to release at a wedding
- A 3D Donut chart
- A nested Donut chart progress bar
- A segmented Donut chart
- A Line chart with multiple datasets tracing sequentially
- A Line chart using the animationTraceCenter option
- A customised Gauge chart
- A Horizontal Bar chart showing popularity of languages
- A Horizontal Bar chart using the CSV reader
- A Horizontal Bar chart using formatted tooltips
- Demos of charts
- A black and purple combined Bar and Line chart
- A black Line chart
- A Line chart using the CSV reader
- A Line chart showing employee sales
- A Line chart using the Google Sheets connector
- An adjustable black Meter chart
- An adjustable Meter that looks like the Google charts Meter
- A Pie chart that retrieves JSON data via AJAX
- A basic Pie chart
- A grey Pie chart
- A horseshoe Pie chart
- A pink Pie chart
- A progress-bar Pie/Donut chart
- A non-filled Radar chart
- A 3D rose chart
- A basic Rose chart
- A Radial Scatter chart using the CSV reader
- A Scatter chart using date/time values
- A vertical line chart
- The earnings of Britain's top paid boss
- A dark and graduated blue Bar chart
- A combined Bar and Line chart
- An SVG Funnel chart showing the key stages of plan CD1
- An SVG Horizontal Bar chart showing income for Star Tech
- A black and orange SVG Horizontal Bar chart
- An SVG Horizontal Bar chart that's useful for an infographic
- A mock-up of a Google Analytics style dashboard.
- An SVG black and white Line chart
- A predominantly Line chart based status dashboard
- An SVG dynamically updating SVG Line chart
- An SVG Line chart using the trace() effect
- An SVG Line chart using transparency
- An SVG version of an older filled demo chart
- An SVG Line with a simple look and feel
- A Line chart with a highlighted section
- An SVG Line chart inspired by a chart on the NVD website
- A graduated Line using the trace effect
- An SVG Line chart showing revenue over time
- A mixed Line/spline chart and a Bar chart
- An SVG Line chart showing UFO sightings over the past century.
- SVG Pie charts that are configured to look like meters
- An SVG Pie chart configured to look like a Meter
- An SVG Pie chart using the Google Sheets connector
- 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
- Walk-through of the scatter-trendline demo
- 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