This demo uses two canvas tags - one for the chart and one for the reflection. If the the chart used the textAccessible option the text would not be reflected - so it doesn't.
<script src="RGraph.common.core.js"></script> <script src="RGraph.bar.js"></script>Put this where you want the chart to show up:
<canvas id="cvs1" width="600" height="250">[No canvas support]</canvas>This is the code that generates the chart:
<canvas id="cvs2" width="600" height="250">[No canvas support]</canvas>
<script>
window.onload = function ()
{
function Draw(id)
{
var bar = new RGraph.Bar({
id: id,
data: [[45,60],[65,30],[40,80],[62,48]],
options: {
labels: ['Luis', 'Kevin', 'John', 'Gregory'],
ymax: 100,
strokestyle: 'white',
linewidth: 2,
shadowOffsetx: 0,
shadowOffsety: 0,
shadowBlur: 10,
hmarginGrouped: 2,
unitsPre: '$',
gutterLeft: 50,
gutterRight: 15,
colors: ['Gradient(white:rgba(255, 176, 176, 0.5))','Gradient(white:rgba(153, 208, 249,0.5))'],
backgroundGridAutofitNumhlines: 5,
backgroundGridAutofitNumvlines: 4,
textAccessible: false
}
}).draw()
return bar;
}
Draw('cvs1');
/**
* Draw the reflection (after inverting the canvas)
*/
var co = document.getElementById("cvs2").getContext('2d');
co.setTransform(1,0,0,-1,0,250);
Draw('cvs2');
/**
* Reset the transformation
*/
co.setTransform(1,0,0,1,0,0);
/**
* Now draw a graduated white rect over the reflection
*/
var grad = co.createLinearGradient(0,0,0,250)
grad.addColorStop(0, 'rgba(255,255,255,0.5)');
grad.addColorStop(0.75, 'rgba(255,255,255,1)');
co.fillStyle = grad;
co.fillRect(0,0,600,250)
};
</script>