About
RGraph is a JavaScript charts library based on
HTML5 SVG and canvas. RGraph is mature (over 18 years
old) and has a wealth of features making it an ideal
choice to use for showing charts on your website.
Version 7.20
Version 7.20 (released in June 2026) is the
latest version of RGraph and the major change in
this version is an update to the default values
of properties making for better looking charts without
having to set any properties.
Read more about this and other changes in
the changelog.
Download
Get the latest version of RGraph (version 7.20, 9th June 2026) 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.
Latest forum posts
These are the latest support forum posts that have been
posted or updated.
9th June, Richard
New version of RGraph: version 7.20
3rd June, Patrick
Question about installing RGraph
1st June, Ouja
How do I add a click event to a bar in my Bar chart?
8th May, Anthony Kuma
Does the SVG Line chart have outofbounds functionality?
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.How to produce a vertical line chart
Written by Richard Heyes, RGraph author, on 23rd April 2023Vertical Line chart using either the canvas or svg Horizontal Bar charts instead of the Scatter charts. The example that's linked here is a vertical Line chart produced in this way. The charts can be spline Line charts (ie smooth and curvy) or, as is shown here, regular Line charts.
The source code for the canvas version of the chart, which is easier to understand compared to using the Scatter chart for a Vertical Line chart, is shown below. The chart itself is one of a few demos (demos/svg-hbar-vertical-line.html demos/hbar-vertical-line.html and demos/hbar-vertical-line-multiple.html) that you'll find in the download archive.
There are a number of options for it which are:
Vertical line properties
Name: lineColor
Description:
The color of the line. There can be only one line so this should only be a single color.
Default: black
Name: lineCap
Description:
How line-ends are drawn. There are three possible values for this option: butt, round and square
Default: round
Name: lineJoin
Description:
How lines are joined together. There are three possible values for this option: round, bevel and miter
Default: round
Name: lineShadowOffsetx
Description:
The horizontal offset of the shadow. Values can be either positive or negative.
Default: 2
Name: lineShadowOffsety
Description:
The vertical offset of the shadow. Values can be either positive or negative.
Default: 2
Name: lineTickmarksStyle
Description:
The style of tickmarks that are drawn on the line. This can be one of: circle, filledcircle, filledendcircle, endcircle, square, rect, filledsquare, filledrect, filledendsquare, filledendrect, endsquare, endrect
Default: null
Name: lineTickmarksDrawNull
Description:
Whether or not to draw tickmarks for null points.
Default: false
Name: lineTickmarksDrawNonNull
Description:
Whether or not to draw tickmarks for points which have a null point on both sides.
Default: false
Name: lineFilledColor
Description:
If the line is filled, then this is the color of the fill.
Default: null
Here's the source code for the chart that's shown above - the code that's necessary to show the line is highlighted:
<script>
new RGraph.HBar({
id: 'cvs',
data: [4,6,8,3,4,12,9,5,6,18],
options: {
// Set the color of the bars to transparent so that they can't be seen
colors: ['transparent'],
yaxisLabels: [
'John','Fredericko','Bono','Lucy','Charles',
'Peter','Brian','Jilly','Peter','Lucy'
],
textSize: 18,
title: 'A vertical line chart',
marginTop: 50,
// These options enable the line and configure it
line: true,
lineSpline: true,
lineLinejoin: 'round',
lineLinecap: 'round',
lineLinewidth: 5,
lineTickmarksStyle: 'endcircle',
lineTickmarksSize: 6,
lineShadow: false
}
}).trace();
</script>