HOWTO: A dual-color Line chart

• Introduction
• The RGraph library tags
• The chart container tag
• The JavaScript code
• Demo files of this technique

Introduction

A multi-color Line chart is something that you'll commonly see and has always been feasible with RGraph. From version 6.17 though, they have become much easier for you to produce because of the introduction of clipping support by way of the clip property and also because of changes to the SVG structure that were introduced in this version.

If you prefer to use the canvas libraries then the process of creating this style of chart is very similar.

The RGraph library tags

Just like normal you need to add the <script> tags to the document which pull in the common core and Line chart RGraph library files.

<script src="/javascript/RGraph.svg.common.core.js" ></script>
<script src="/javascript/RGraph.svg.line.js" ></script>

The chart container tag

With canvas charts you need a canvas tag for the chart to be drawn on but with SVG charts it's a div tag that you need and which the SVG tag is then added to (by RGraph). That looks like this:

<div id="chart-container" style="width: 700px; height: 300px"></div>

The JavaScript code

And here we have the code that creates the chart. Two RGraph Line chart objects are used - one for the upper part of the chart and one for the lower part. To make life simpler and to avoid unnecessary configuration repetition the javascript spread operator is used to repeat the first objects configuration on the second chart object, albeit with the filledColors option changed.

<script>
    new RGraph.SVG.Line({
        id: 'chart-container',
        data: DATA = [4,5,5,5,-3,-2,-1,-5,-5,5,5,4,5,5,5,1,3,5,5,-5,-4,-5,-2,3],
        options: OPTIONS = {
            textSize: 16,
            marginLeft: 50,
            linewidth: 5,
            shadow: true,
            shadowBlur: 1,
            colors: ['#0c0'],
            filled: true,
            filledColors: ['rgba(0,232,0,0.25)'],
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            spline: true,
            tickmarksStyle:'circle',
            tickmarksSize:3,
            tooltips: 'Quantity of sales: %{value}',
            tooltipsCss: {
                fontSize: '16pt'
            },
            yaxis: false,
            yaxisScaleMax: 10,
            yaxisScaleMin: -10,
            yaxisLabelsCount:10,
            xaxisTickmarks: false,
            xaxisColor: '#666',
            xaxisLinewidth: 2,
            xaxisLabels: [
                '','Jan','','','Feb','','','Mar','',
                '','Apr','','','May','','','Jun','',
                '','Jul','','','Aug','','','Sep','',
                '','Oct','','','Nov','','','Dec',''
            ],
            clip:'scale:0-max' // Clip to the top half of the chart
        }
    }).trace();

    new RGraph.SVG.Line({
        id: 'chart-container',
        data: DATA,
        options: {
            ...OPTIONS,
            filledColors: ['rgba(255,0,0,0.25)'], // Override with a new color
            colors: ['#c00'],                     // Override with a new color
            clip:'scale:min-0'                    // clip to the bottom half instead of the top
        }
    }).trace();
</script>

Demo files of this technique

Example files that are included in the download archive that you can run on your computer are svg-line-clipped.html and svg-line-clipped2.html.

There's also a Bar chart demo called svg-bar-dual-color.html that also uses this technique to show a dual-color Bar chart.