A new way to produce a vertical line 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:

• 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,5,7,4,2,4,6,8,6,5],
    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,
        lineLinejoin: 'round',
        lineLinecap: 'round',
        lineLinewidth: 10,
        lineTickmarksStyle: 'circle',
        lineTickmarksSize: 8
    }
}).draw();