A mixed Line/spline chart along with a Bar chart

This is an example of a mixed Line/spline and also a Bar chart. It's all drawn on the same SVG tag so tooltips will work if you need them as well.

There's three chart objects - one for the red Line, one for the gray line and one for the Bar chart.

The data for one of the Lines - the spline chart - is created dynamically and is two units lower than the angular Line. This is what the forEach() loop does in the code below.

The second Line chart along with the Bar chart have their axes and Y axis labels turned off as these are drawn by the first Line chart. Similarly the X axis labels are drawn by the first Line chart only.

There's a responsive configuration which simply reduces the size of the chart and removes the CSS float that is applied to the canvas tag.

This goes in the documents header:

<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.common.line.js"></script>
<script src="RGraph.svg.common.bar.js"></script>

Put this where you want the chart to show up:

<div id="cc" style="width: 700px; height: 250px"></div>

This is the code that generates the chart: