A Bar chart of my favourite dog breeds

View the bare-bones, stripped-down version of this demo

[No canvas support]

How could you resist such a gorgeous face?! Here's an amusing chart that shows you exactly what your favourite dog breed should be. This type of dog was featured in the Tom Hanks film Turner and Hooch. A funny film from the 1980's that's definitely worth watching.

The chart demonstrates the sketch variant (add variant: 'sketch' to your chart configuration) that the Bar chart has that gives the chart more of a "hand-drawn" look. The background image depicts a French Mastiff dog that was added using the backgroundImage property.

The font has been set to Comic sans MS so that it goes well with the style of the chart.

The chart has been given a large bottom margin so that the slogan on the background image is clearly visible.

To get the chart looking good on smaller screens the responsive() function changes the margins, updates the width and height of the background image and the CSS float is removed.


This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>
Put this where you want the chart to show up:
<div>
    <canvas id="cvs" width="600" height="250" >[No canvas support]</canvas>
</div>
This is the code that generates the chart - it should be placed AFTER the canvas tag(s):