HOWTO: A dual-color Line chart
- Introduction
- Add the DIV tags to the document
- Draw both of the Line charts
- Demo files of this technique

Introduction
This is a chart that I've created before using the canvas
tag but is
using the SVG
Line chart to render it instead. If you're using the SVG
libraries
this is very useful since you don't have to mix-and-match and can stick
to just using SVG
.
You might also be already familiar and comfortable working with the SVG
tag
and unwilling to learn canvas
as well.
Add the <div> tags to the document
The first thing to do is add the div
tags to the document.
This is where the chart will be rendered. There are two tags used - one for
the top half and one for the bottom. All the necessary CSS
is in the
style
block for clarity but you can
place this inline if you prefer.
<style> #container { position: relative; width: 700px; height: 300px; } #wrapper1 { position: absolute; top: 0px; left: 0; width: 700px; height: 150px; overflow: hidden; } #wrapper2 { position: absolute; top: 150px; left: 0; width: 700px; height: 150px; overflow: hidden; } #cc1 { width: 700px; height: 300px; position: absolute; top: 0; left: 0; } #cc2 { width: 700px; height: 300px; position: absolute; top: -150px; left: 0; } </style> <div id="container"> <div id="wrapper1"> <div id="cc1"></div> </div> <div id="wrapper2"> <div id="cc2"></div> </div> </div>
Draw both of the Line charts
The code that creates the two charts is very straight-forward
because the "clipping" is actally handled by the two
div
tags that we've already defined. So
the code that we use is just the same as that used for any
regular chart.
</script> // Create the green part of the line line = new RGraph.SVG.Line({ id: 'cc1', 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: { textSize: 16, marginLeft: 50, colors: ['#0c0'], linewidth: 2, filled: true, filledColors: ['rgba(0,232,0,0.25)'], yaxisScaleMax: 10, yaxisScaleMin: -10, xaxisTickmarks: false, backgroundGridBorder: false, backgroundGridVlines: false, yaxis: false, spline: true, xaxisColor: '#666', tickmarksStyle:'circle', tickmarksSize:3, yaxisLabelsCount:10, tooltips: 'Quantity of sales: %{value}', tooltipsCss: { fontSize: '16pt' } } }).trace(); // Create the red part of the line line2 = new RGraph.SVG.Line({ id: 'cc2', data: data, options: { textSize: 16, yaxis: false, yaxisScaleMax: 10, yaxisScaleMin: -10, xaxisLinewidth: 5, marginLeft: 50, linewidth: 2, filled: true, filledColors: ['rgba(255,0,0,0.25)'], xaxisTickmarks: false, xaxisLabels: [ '','Jan','','','Feb','','','Mar','', '','Apr','','','May','','','Jun','', '','Jul','','','Aug','','','Sep','', '','Oct','','','Nov','','','Dec','' ], backgroundGridBorder: false, backgroundGridVlines: false, spline: true, tickmarksStyle:'circle', tickmarksSize:3, yaxisLabelsCount:10, tooltips: 'Quantity of sales: %{value}', tooltipsCss: { fontSize: '16pt' } } }).trace(); </script>
Demo files of this technique
A couple of 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, as shown by the
image here.