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.

More »


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.

More »


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:

  • lineEnables the line
  • lineColorThe color of the line
  • lineCapDictates the style of the end of the line
  • lineLinewidthDictates the style of line-joins
  • lineShadowEnables a shadow for the line
  • lineShadowColorThe color of the shadow
  • lineShadowBlurThe magnitude of the shadow blurring effect
  • lineShadowOffsetxThe horizontal pixel offset of the shadow
  • lineShadowOffsetyThe vertical pixel offset of the shadow
  • lineSplineThis changes the line to a spline (smooth and curvy)
  • lineTickmarksStyleDetermines the style of the tickmarks on the line (if any)
  • lineTickmarksSizeThe size of the tickmarks
  • lineTickmarksDrawNullWhether or not to draw tickmarks for null points
  • lineTickmarksDrawNonNullWhether or not to draw tickmarks for points which have a null point on both sides

Here's the source code for the chart that's shown above - the code that's necessary to show the line is highlighted:

    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: [
            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