A Bar chart with a dark background
Summary: This is a Bar chart with a dark theme. It illustrates how versatile RGraph can be when you're configuring your charts.
This is a grouped Bar chart with two bars per group which uses red and blue
graduated fills. The background grid has been customised and the background
itself is a dark color (so the text has been changed to white). Also the
chart is using the Bar chart wave()
effect. This grows sequentially from
the left-hand-side with a small delay between each group of bars.
The two gradients that are used here (Gradient(white:#ccf:#ccf:#ccf:#ccf)
and Gradient(white:#faa:#faa:#faa:#faa)
)
are created by using the RGraph specific gradient syntax. This is an easy way
to produce gradients (it's certainly easier than the canvas API method!) and
can be utilised to produce gradients for your own charts.
If you wanted to add further information to the chart in order to identify
the meaning of the two bars you could add a key in either the graph or margin
modes or you could perhaps use the labelsAbove
option.
For smaller screens the responsive()
function reduces the size of the chart,
reduces the size of the text on the chart and reduces the size of the margins.
<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="cvs" width="600" height="250"> [No canvas support] </canvas>This is the code that generates the chart: