A Line chart with a highlighted section

Here we have an example of a dark themed SVG Line object that has a section of it highlighted. The standard Line is a filled Line that does not use the filledAccumulative option - it uses transparency in the colors instead so that you can see datasets at the back of other datasets.

The thing that differentiates this demo is the fact that once rendered there are two rectangles placed over the chart - one on the left-hand-side and one on the right-hand-side. This leaves a section in the middle of those two rectangles that has a highlighted appearance.

As it is, on this chart the section that's highlighted has no real meaning - but this doesn't have to be the case and it could highlight certain entries or a range on the chart (for example it could be a horizontally highlight rectangle).

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

<div style="width: 600px; height: 250px; display: inline-block; background-color: black"></div>

<script>
    new RGraph.SVG.Line({
        id: 'cc',
        data: [
            [22,45,56,53,45,23,12,19,43,56,56,76,64,35,22],
            [13,18,33,23,43,45,56,43,45,12,45,53,56,56,51],
            [48,56,45,35,21,56,48,45,45,56,53,65,35,22,21],
            [12,23,25,22,21,32,24,21,12,53,12,32,22,33,12]
        ],
        options: {
            spline: true,
            filled: true,
            colors: [
                'rgba(146,223,179,0.75)',
                'rgba(109,194,189,0.75)',
                'rgba(173,136,190,0.75)',
                'rgba(84,112,133,0.75)'
            ],
            backgroundGridColor: '#666',
            textColor: 'white',
            xaxisLabels: ['Rich','Terry','Fay','Hoolio','Bob','Carl','Pob','Neil','Matt','Kev','Jill','Lou','Luis','Pete','John'],
            key: ['H67','JK89','GB88','SX95'],
            keyLabelsColor: 'white',
            keyLabelsBackground: 'black'
        }
    }).draw().exec(function (obj)
    {
        // These cover the left and right sides of the chart in a dark,
        // semi-transparent rect
        RGraph.SVG.create({
            svg: obj.svg,
            type: 'rect',
            attr: {
                x: 35,
                y: 35,
                width: 200,
                height: 180,
                fill: 'rgba(0,0,0,0.35)'
            }
        });

        RGraph.SVG.create({
            svg: obj.svg,
            type: 'rect',
            attr: {
                x: obj.width - 200 - 35,
                y: 35,
                width: 200,
                height: 180,
                fill: 'rgba(0,0,0,0.3)'
            }
        });
    });
</script>