RGraph filledAccumulative line chart with tooltips

by Abeee Doe

HTML

<script src='https://cdnjs.cloudflare.com/ajax/libs/RGraph/606/RGraph.common.core.js'></script>
            <script src='https://cdnjs.cloudflare.com/ajax/libs/RGraph/606/RGraph.line.min.js'></script>
            <script src='https://cdnjs.cloudflare.com/ajax/libs/RGraph/606/RGraph.common.dynamic.min.js'></script>
            <script src='https://cdnjs.cloudflare.com/ajax/libs/RGraph/606/RGraph.common.key.min.js'></script>
            <script src='https://cdnjs.cloudflare.com/ajax/libs/RGraph/606/RGraph.common.tooltips.min.js'></script>

CSS

canvas {
    border:solid 1px red;
}
.chart-tooltips {
  text-align: left !important;
}
.chart-tooltips * {
  font-size: 11px;
  color: white !important;
  min-height: unset !important;
}
.chart-tooltips h1 {
  font-size: 13px !important;
  font-weight: 800;
  margin: 0;
  border-bottom: solid 1px white;
}
.chart-tooltips h2 {
  font-size: 12px !important;
  margin: 0 0 10px 0;
}

JavaScript

const dateLabels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
const minData = [4, 2, 5, 2, 7, 8, 9]
const maxData = [12, 10, 11, 8, 13, 14, 15]
let chartNm = "My Data"
let unitNm = "Performance %"

function getTooltipContent(index) {
  const minValue = minData[index]
  const maxValue = maxData[index]
  const dateLabel = dateLabels[index] || ""
  let pct = ""
  if (unitNm && unitNm.indexOf("%") > -1) pct = "%"
  let result =  `<h1>${chartNm} (${unitNm}) </h1><h2>${dateLabel}</h2>Min: ${minValue}${pct}<br>Max: ${maxValue}${pct} `;
  console.log('tooltip',index,result);
  return result;
}



const canvasId = "my-canvas"
let canvas =  document.getElementById(canvasId) || document.createElement("canvas")
if (!canvas.id) {
  canvas.id = canvasId;
  canvas.width = window.innerWidth - 40;
  canvas.height = 300;
  document.body.appendChild(canvas);
}


const maxDataA = maxData.map((maxValue, index) => {
  return maxValue - minData[index]
});

const tooltips1 = minData.map((_, index) => {
  return getTooltipContent(index)
})
const tooltips2 = maxData.map((_, index) => {
  return getTooltipContent(index)
})

const yaxis = { min: 0, max: 20, stepNum: 5, dp: 0 }
const chart = new RGraph.Line({
  id: canvas.id,
  data: [minData, maxDataA],
  options: {
    filled: true,
    //filledAccumulative: true,
    colors: ["transparent", "rgba(178,240,241,0.8)"],
    xaxisLabels: dateLabels,
    xaxisLabelsAngle: 0,
    xaxisLabelsSize: 8,
    gutterLeft: 50,
    gutterTop: 1,
    gutterBottom: 0,
    linewidth: 2,
    title: 'xxx', // Would be nice to remove the space that a title existed in
    titleSize: 0, // Would be nice to remove the space that a title existed in
    textAccessible: true,
    
    tooltips: [tooltips1, tooltips2],
    tooltipsEffect: "fade",
    tooltipsCssClass: "chart-tooltips",
    tooltipsHighlightStyle: "dot",
    
    yaxisLabelsSize: 8,
    yaxisScaleDecimals: yaxis.dp,
    yaxisScaleMin: yaxis.min,
    yaxisScaleMax: yaxis.max,
   ...