Updated multi-color Line chart demo
Written by Richard Heyes, on 17th August 2022
Here's an updated version of a demo that's already
in the download archive.
The colors have been changed, tickmarks added, it
now uses the View example on CodePen
es6
spread
operator when
copying the configuration to the second chart, a
key has been added and the way that the gradients
are setup (using the beforedraw
RGraph event). All the code for it is shown below
and it should work as-is with version 6.08.
<script> // The data for both of the Line chart objects data = [8,4,6,2,1,5,3,3,4,8,9,8,4,1,3,4,7,8,8,5,6,4,1,2,3,4,2,3,1,5,3,5,1,5,6,8,7,9]; // Draw a Line chart that shows the fill of the chart line = new RGraph.Line({ id: 'cvs', data: data, options: config = { xaxisLabels: [ '','Q1\n2014','', '','Q2\n2014','', '','Q3\n2014','', '','Q4\n2014','', '','Q1\n2015','', '','Q2\n2015','', '','Q3\n2015','', '','Q4\n2015','' ], filled: true, backgroundGridColor: '#ddd', backgroundGridVlines: false, backgroundGridBorder: false, xaxis: false, yaxis: false, spline: true, yaxisScaleUnitsPost: '%', marginLeft: 50, marginBottom: 50, textColor: 'gray', colors: ['rgba(0,0,0,0)'], shadow: false, tickmarksSize: 3, tickmarksStyle: 'filledcircle', key: ['Very Low','Normal','High','Very high'], keyColors: ['blue','green','orange','red'], keyPosition: 'margin', keyPositionX: 65, keyColorShape: 'circle', keyLabelsSize: 16, linewidth: 3, textSize: 16, textFont: "'Calibri Light', sans-serif" } }).on('beforedraw',function (obj) { // Create the gradient that is used as the stroke color grad = obj.context.createLinearGradient(0,35,0,200); grad.addColorStop(0, '#FF642C'); grad.addColorStop(0.25, '#FF642C'); grad.addColorStop(0.25, 'orange'); grad.addColorStop(0.5, 'orange'); grad.addColorStop(0.5, '#5ADDAA'); grad.addColorStop(0.75, '#5ADDAA'); grad.addColorStop(0.75, '#2BB3FF'); grad.addColorStop(1.0, '#2BB3FF'); // Create the gradient that is used as the fill color gradFill = obj.context.createLinearGradient(0,35,0,200); gradFill.addColorStop(0, '#F8D3D7'); gradFill.addColorStop(0.25, '#F8D3D7'); gradFill.addColorStop(0.25, '#FFE1D8'); gradFill.addColorStop(0.5, '#FFE1D8'); gradFill.addColorStop(0.5, '#E0F9EE'); gradFill.addColorStop(0.75, '#E0F9EE'); gradFill.addColorStop(0.75, '#DAF0FF'); gradFill.addColorStop(1.0, '#DAF0FF'); // Apply the gradient to the charts fill obj.set({ filledColors: [gradFill] }); }).draw(); // Now create and draw the second, non-filled line that sits on // top of the fill. line2 = new RGraph.Line({ id: 'cvs', data: data, options: { ...config, filled: false, labels: null, xaxis: false, yaxis: false, yaxisLabels: false, backgroundGrid: false, colors: [grad] } }).draw(); </script>