I am trying to get tooltips to work on my RGraph that is using filledAccumulative:true
- I can get tooltips to come out if I just pass in tooltips1
(but that only works with the lower values), but when I pass in [tooltips1, tooltips2]
then I get nothing. Can anyone tell me why the following isn't working?
const chart = new RGraph.Line({
id: canvas.id,
data: [minData, maxDataA],
options: {
filled: true,
filledAccumulative: true,
colors: ["transparent", "rgba(178,240,241,1)"],
xaxisLabels: dateLabels,
xaxisLabelsAngle: 0,
xaxisLabelsSize: 8,
gutterLeft: 50,
gutterTop: 1,
gutterBottom: 0,
linewidth: 2,
title: null,
titleSize: 1,
textAccessible: true,
tooltips: [tooltips1, tooltips2],
tooltipsEffect: "fade",
tooltipsCssClass: "chart-tooltips",
tooltipsHighlightStyle: "dot",
yaxisLabelsSize: 8,
yaxisScaleDecimals: yaxis.dp,
yaxisScaleMin: yaxis.min,
yaxisScaleMax: yaxis.max,
yaxisLabelsCount: yaxis.stepNum,
yaxis: true,
marginLeft: 50,
yaxisTitleSize: 8,
yaxisTitle: unitNm,
yaxisTitleOffsetx: 5,
},
})
.draw();
Can anyone tell me why the following isn't working?
(The full runtime code can be seen below, or on jsfiddle):
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,
yaxisLabelsCount: yaxis.stepNum,
yaxis: true,
marginLeft: 50,
yaxisTitleSize: 8,
yaxisTitle: unitNm,
yaxisTitleOffsetx: 5,
},
})
.draw();
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;
}
<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>
Unlike the data, the tooltips array is just one big single-dimension array. Fortunately ES6 comes to the rescue and you can use the spread operator here to easily change what you're passing.
So change this line:
tooltips: [tooltips1, tooltips2],
...to this:
tooltips: [...tooltips1, ...tooltips2],