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

• line Enables the line
• lineColor The color of the line
• lineCapDictates the style of the end of the line
• lineLinewidth Dictates the style of line-joins
• lineShadow Enables a shadow for the line
• lineShadowColor The color of the shadow
• lineShadowBlur The magnitude of the shadow blurring effect
• lineShadowOffsetx The horizontal pixel offset of the shadow
• lineShadowOffsety The vertical pixel offset of the shadow
• lineSpline This changes the line to a spline (smooth and curvy)
• lineTickmarksStyle Determines the style of the tickmarks on the line (if any)
• lineTickmarksSize The size of the tickmarks
• lineTickmarksDrawNull Whether or not to draw tickmarks for null points
• lineTickmarksDrawNonNull Whether 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:

<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
        }
    }).trace();
</script>