HELP - Interval Charts

[Doug]

Is there a way to fix labels on the intervals and edit what is shown in the hover state?

I created an interval chart to show an average with a high and a low represented by a box interval.  I want to always show the high and low numbers and on hover, only show the average.  Please help.

Current code is below:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">

      google.charts.load('current', {'packages':['corechart']});

      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Period');

        data.addColumn('number', 'Average Return (%)');

        data.addColumn({id:'i0', type:'number', label: 'Lowest Return (%)', role:'interval'});

        data.addColumn({id:'i1', type:'number', label: 'Highest Return (%)', role:'interval'});

  

        data.addRows([

            ['1-Yr', 6.58, -10.42, 27.03],

            ['5-Yr', 6.12, 0.62, 17.30],

            ['10-Yr', 6.26, 2.84, 13.86],

            ['20-Yr', 6.46, 3.24, 11.35]

]);

  

        // The intervals data as boxes

        var options = {

            curveType: 'function',

            series: [{'color': '#3a6aa5'}],

            intervals: { 'lineWidth': 0, 'boxWidth': 1, 'color': '#3a6aa5', style: 'boxes' },

            chartArea: {left: 30, top: 20},

            legend: 'none',

            vAxis: {minValue: -45,

                  ticks: [-45, -25, -5, 15, 35, 55]},

           };

  

        var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));

        chart_lines.draw(data, options);

      }

    </script>