I create a dynamic tooltip with a custom chart inside of it.
tooltip: {
borderRadius: 15,
borderWidth: 0,
shadow: false,
enabled: true,
backgroundColor: 'none',
useHTML: true,
shared: true,
formatter: function() {
var div = document.createElement('div');
Highcharts.chart(div, {
chart: {
height: 300,
width: 300
},
title: {
text: 'Custom Chart Title'
},
series: [
{
data: [10, 20],
color: 'red'
},
{
data: [20, 10],
color: 'green'
}
],
yAxis: {
title: {
text: 'Quantity'
}
}
});
return div.innerHTML;
}
}
Illustrative Data Visualizations
The primary chart is displayed in the form of a line. The tooltip chart, on the other hand, is visualized as a column.
Fictitious Data Visualization
In this scenario, both the main chart and the tooltip chart are represented as line charts. Some symbols may appear partially hidden due to an unknown obstruction or rendering issue.
Any insights on how to resolve this challenge?
Status Update 1
The elements containing the series have been identified, rendered correctly, but remain hidden from view despite efforts to bring them forward using CSS.
<g class="highcharts-series-group" data-z-index="3">...</g>
Need suggestions on how to make them visible.
Status Update 2
Tried adjusting dimensions using different methods without success:
div.style.width = "500px";
and
chart: {
height: 300,
width: 300
}
but no progress was made.
Status Update 3
Created a jsfiddle for reference. Feedback appreciated.
Open to any ideas or solutions. Your input is valuable.