MENU
.net Powerful JavaScript charts

How to produce a vertical line chart

Written by Richard Heyes, RGraph author, on 23rd April 2023
From the next version of RGraph you'll be able to use the Horizontal Bar chart to produce a vertical line chart as well as the Scatter chart.

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

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