MENU
.net Powerful JavaScript charts
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.

More »

 

Version 7.11
Version 7.11 (released in March 2026) is the latest version of RGraph and contains just a few updates to the code which you can see on the changelog page. There's a new dumbbell variation for the Bar and Horizontal bar charts (both SVG and canvas) and the front page layout of the website has been tweaked.

Download »

 

HTML datagrid
In the April 2025 (v6.21) release a new datagrid object was added. This makes it easy to add static or dynamic data tables to your pages. It can be used whether you use the canvas or SVG libraries or entirely standalone.

Read more »

 

Download
Get the latest version of RGraph (version 7.11, 21st March 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.

Download »

 

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.

More »

How to produce a vertical line chart

Written by Richard Heyes, RGraph author, on 23rd April 2023

From version 6.12 of RGraph there will be a new and better way to produce a Vertical 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: line
Description: 
Whether the line is enabled or not.
Default: false
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: linelineWidth
Description: 
How thick the line is drawn.
Default: 1
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: lineShadow
Description: 
Whether a shadow is drawn for the line.
Default: true
Name: lineShadowColor
Description: 
The color of the shadow.
Default: #666
Name: lineShadowBlur
Description: 
The severity of the blurring effect of the shadow.
Default: 2
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: lineSpline
Description: 
Whether the line is drawn as a spline or not (curvy).
Default: false
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: lineTickmarksSize
Description: 
The size of the tickmarks.
Default: 5
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: lineFilled
Description: 
Whether the line is filled or not.
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: {
            backgroundGridHlines: false,
            backgroundGridBorder: false,
            xaxis: false,
            yaxis: false,

            // 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>