Showing an average line across a Bar chart

Two things:

1. To show a horizontal line across a bar chart to indicate the average percent that is being shown. I used a line chart to show the average but it overflows into the Y-axis labels (see image) and I don't want that.

2. To show some 'floating' text that sits upon the line to indicate the percentage.


-- begin code --
    <script src="./rgraph/libraries/RGraph.common.core.js" ></script>
    <script src="./rgraph/libraries/RGraph.common.dynamic.js" ></script>
    <script src="./rgraph/libraries/RGraph.common.tooltips.js" ></script>
    <script src="./rgraph/libraries/RGraph.bar.js" ></script>
    <script src="./rgraph/libraries/RGraph.hbar.js" ></script>
    <script src="./rgraph/libraries/RGraph.drawing.rect.js" ></script>
    <script src="./rgraph/libraries/RGraph.line.js" ></script>

        <canvas id="cc" width="700" height="560" style [No canvas support]</canvas>

<script>
        new RGraph.Bar({
        id: 'cc',
        data: [54.6,47.1,89.6,90.9,100,59.6,80.7],
        options: {
                backgroundGridBorder: false,
                backgroundGridHlines: false,
                backgroundGridVlines: false,
                colors: ['#bcd27f','#e0df85','#38976f','#38976f','#05876b','#9bc478','#5ca673'],
                colorsSequential: true,
                marginBottom: 70,
                marginLeft: 70,
                marginTop: 90,
                regions: ['One','Two','Three','Four','Five','Six','Seven'],
                score2: ['159 / 291','98 / 208','146 / 163','90 / 99','28 / 28','31 / 52','46 / 57'],
                scores: [54.6,47.1,89.6,90.9,100,59.6,80.7],
                textSize: 14,
                title: 'Trying to create an Average line',
                titleBold: true,
                titleSize: 18,
                tooltips:'%{property:regions[%{group}]}: %{property:scores[%{group}]}%<br>%{property:score2[%{group}]}',
                tooltipsEffect: 'fade',
                tooltipsEvent: 'mousemove',
                tooltipsHighlight: false,
                tooltipsHotspotXonly: true,
                xaxisLabels: ['One','Two','Three','Four','Five','Six','Seven'],
                xaxisLabelsAngle: 45,
                xaxisLabelsOffsety: 3,
                yaxisLabelsCount: 10,
                yaxisLabelsOffsetx: -5,
                yaxisScaleMax: 100,
                yaxisScaleMin: 0,
                yaxisScaleUnitsPost: '%',
                yaxisTickmarks: true,
                yaxisTickmarksCount: 10,
                }

/* }).draw(); */

        }).grow();

        setInterval(function ()
        {
            var data = RGraph.arrayRandom(7, 0, 10);

            bar.grow({data: data});
        }, 3000);

data = [66.59,66.59];

    new RGraph.Line({
        id: 'cc',
        data: data,
        options: {
                backgroundGridBorder: false,
                backgroundGridHlines: false,
                backgroundGridVlines: false,
                colors: ['#aaaaaa'],
                linewidth: 5,
                spline: false,
                xaxis: false,
                yaxis: false,
                marginLeft: 40,
                shadow: false,
                labelsAbove: false,
                textAccessible: false,
                yaxisLabelsCount: 0,
                yaxisScaleMax: 100,
                yaxisScaleMin: 0,
                xaxisPosition: 55,
                yaxisLabelsColor: 'white',
        }
    }).draw();

</script>

-- end code --

I think a better way would be to use the draw event to do the custom drawing - I'm presuming that you don't have any other reason for using the Line chart.

Here's an example for you:

https://codepen.io/rgraph/pen/zYRbwdY