SVG tooltip z-index with html title - javascript

I'm trying to use an HTML title with a very large tooltip. However I can't seem to get the tooltip background to appear above the title.
Here's my code:
var chart = new Highcharts.Chart({
"chart": {
"type": "gauge",
"renderTo": "chart-2-container",
"marginTop": 60
},
"series": [{
"data": [{
"y": 55.6,
"name": "Area",
"tooltip": "Area: 50.6 %<br/>Minimum: 50.6<br/>3rd quartile: 57.1<br/>2nd quartile: 59.4<br/>1st quartile: 64.7<br/>Maximum: 75.7"
}],
"name": "%"
}],
"tooltip": {
"borderColor": "#E2E2E2",
"borderRadius": 5,
"backgroundColor": "white",
"style": {
"color": "#454545",
"fontSize": 14,
"fontFamily": "Arial, sans-serif",
"zIndex": 9999,
"lineHeight": 14 * 1.4
},
"formatter": function() {
return this.point.tooltip;
}
},
"title": {
"floating": true,
"useHTML": true,
"style": {
"zIndex": 1,
},
"text": "This is some link as a very long title which will probably wrap a couple of lines"
},
"yAxis": {
"title": null,
"tickPixelInterval": 72,
"tickLength": 10,
"minorTickLength": 8,
"minorTickWidth": 1,
"min": 50.6,
"max": 75.7,
"plotBands": [{
"from": 50.6,
"to": 57.1,
"color": "#ee2c34",
"thickness": 15,
}, {
"from": 57.1,
"to": 59.4,
"color": "#f07627",
"thickness": 15,
}, {
"from": 59.4,
"to": 64.7,
"color": "#a88735",
"thickness": 15,
}, {
"from": 64.7,
"to": 75.7,
"color": "#2c876d",
"thickness": 15,
}]
},
"pane": {
"startAngle": -150,
"endAngle": 150
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='chart-2-container' style="width: 400px; height: 300px;">
</div>
(also as a fiddle https://jsfiddle.net/d6q1gt4m/)
The problem is that the background is always behind the title. I could switch to non-html title but then I have the problem that only the 1st line is actually a URL if the title is wrapping (and I need to reapply all my link styles).
Does anyone know how I can get the svg tooltip to appear on top of HTML ?
Note: I would like to avoid having to set useHTML for the tooltip if possible as that opens up another can of worms for me.

With CSS and updating tooltip and tooltip formatter the problem is fixed.
For reference check tooltip
Updated tooltip
"tooltip": {
"backgroundColor": "rgba(255,255,255,0)",
"borderWidth": 0,
"borderRadius": 1,
"shadow": false,
"useHTML": true,
"style": {
"color": "#454545",
"fontSize": 14,
"fontFamily": "Arial, sans-serif",
"zIndex": 9999,
"lineHeight": 1.8
},
"formatter": function() {
return "<div>" + this.point.tooltip + "</div>";
}
},
css
.highcharts-tooltip {
z-index: 9998;
}
.highcharts-tooltip div {
background-color: white;
border: 1px solid #E2E2E2;
opacity: 1;
z-index: 9999!important;
padding: 5px
}
Fiddle demo

Related

HighCharts errorbar not displaying correctly

I am currently trying to display errorBars with a column chart which is working for the most part. The problem is the ordering of the error bars. They are back to font.
I have used the same data on a line chart which works fine for me.
This is my setup for my HighCharts options:
"chart": {
"type": "column",
"renderTo": {}
},
"title": {
"text": "Line chart",
"style": {
"color": "#000",
"fontFamily": "Arial, Helvetica, sans-serif",
"fontSize": "1.1rem",
"fontWeight": "bold"
}
},
"subtitle": {
"text": "Browser market share data 2019-2020",
"style": {
"color": "#000",
"fontFamily": "Arial, Helvetica, sans-serif",
"fontSize": "0.9rem",
"fontWeight": "regular"
}
},
"xAxis": [
{
"categories": [
"Chrome",
"Internet Explorer\n ",
"Firefox\n ",
"Edge\n ",
"Safari\n ",
"Sogou Explorer\n ",
"Opera\n ",
"QQ\n ",
"Other\n "
],
"title": {},
"accessibility": {
"description": "Line chart"
}
}
],
"tooltip": {
"shared": true
},
"plotOptions": {
"series": {
"showInLegend": true,
"events": {}
},
"column": {
"maxPointWidth": 75
}
},
"legend": {
"enabled": true,
"itemStyle": {
"font": "Arial, Helvetica, sans-serif",
"color": "#000"
},
"itemHoverStyle": {
"color": "gray"
}
},
"accessibility": {
"description": null
},
"series": [
{
"name": "2019",
"yAxis": 0,
"data": [
61.41,11.84,10.85,1,1,1.64,1.6,1,2.61
]
},
{
"name": "2020",
"yAxis": 0,
"data": [
50,40,20,15,14,12,6,4,3
]
},
{
"name": "Confidence interval",
"type": "errorbar",
"yAxis": 0,
"data": [
[55,65],
[5,15],
[7,25],
[1,2],
[1,2],
[1,4],
[1,3],
[1,2],
[2,4]
],
"tooltip": {
"pointFormat": "<strong>2019 error range</strong>: {point.low}-{point.high}<br/>"
}
},
{
"name": "Confidence interval",
"type": "errorbar",
"yAxis": 0,
"data": [
[45,55],
[30,50],
[15,30],
[10,20],
[10,20],
[6,18],
[4,8],
[1,6],
[1,6]
],
"tooltip": {
"pointFormat": "<strong>2020 error range</strong>: {point.low}-{point.high}<br/>"
}
}
],
"credits": {
"enabled": false
},
"exporting": {
"enabled": false
},
"colors": [
"#b2182b",
"#d6604d",
"#f4a582",
"#fddbc7",
"#d1e5f0",
"#92c5de",
"#4393c3",
"#2166ac"
]
}
And this is the result:
As you can see from the hover state that the labels are displaying correctly but on the chart the error bars don't match each column. They are in reverse and misaligned. Also they are slightly different shape from each other.
I have used this HighCharts guide for reference, mine doesn't look much different from the example https://www.highcharts.com/demo/error-bar/grid-light
The difference here is because the chart differently places the columns and error bars, especially it is visible with multiple columns.
After simplifying the demo, I was able to add one property called pointPlacement to the error series with the number to shift that series to a proper place.
API: https://api.highcharts.com/highcharts/series.errorbar.pointPlacement
Live demo: https://jsfiddle.net/BlackLabel/L3xwoe92/

Highchart spline Chart with no markers and legends markers as circle's

Can anyone help me with this, I need the following legend marker symbol marked in the image as a circle?
I have tried adding marker: circle inside series but it is not working.
I am new to Highcharts. Is there any possible way to fix this?
Thanks in advance.
NOTE: My chart has multiple series.
{
"series": [{
"name": "Test series",
"data": [{
"y": 8,
}, {
"y": 10,
}, {
"y": 15,
}, {
"y": 8,
}],
"type": "spline",
"color": "#dd0014",
marker: {
symbol: 'circle'
}
}],
"xAxis": {
"categories": ["cat-1", "cat-2", "cat-3"],
},
"plotOptions": {
"series": {
"marker": {
"symbol": "circle",
"enabled": false
},
},
},
"legend": {
"align": "right",
"enabled": true,
"y": 35,
"x": 0,
"verticalAlign": "top",
"layout": "vertical",
"itemStyle": {
"fontSize": "12px",
"fontWeight": "light"
},
"reversed": true,
"symbolRadius": 9,
"itemMarginTop": 3,
"itemMarginBottom": 3,
"marker": "circle"
},
"colors": ["#00B19D", "#4E3363", "#3A99D5", "#00AE84", "#49494A", "#318ACA"],
"credits": {
"enabled": false
},
}
JsFiddle Link here
I have found a workaround solution after going through the Highcharts documentation.
chart: {
events: {
load: function() {
$(".highcharts-legend-item path").attr('stroke-width', 10);
$(".highcharts-legend-item path").attr('d', "M 8 14.75 Z 61.25 61.25 99 1 1 33.45 44.00");
$(".highcharts-legend-item path").attr("stroke-linecap", "round");
},
redraw: function() {
$(".highcharts-legend-item path").attr('stroke-width', 10);
$(".highcharts-legend-item path").attr('d', "M 8 14.75 Z 61.25 61.25 99 1 1 33.45 44.00");
$(".highcharts-legend-item path").attr("stroke-linecap", "round");
}
}
},
added this to update legend symbols using JQUERY
DEMO LINK HERE

Problem accessing array using Higcharts, how may i access to x position?

I'm trying to access an array position passed by UserOptions using Highcharts.
Series declaration, where i declare the array
Implementation
The problem is that, when i try to access an element of this array it is not shown.
Just see:
Accessing array
However, when i access it directly and print it using console.log() this value is shown.
console.log(a.series[1].userOptions.cuotasPendientes[5]);
Accessing directly
Thnx guys.
The code:
var a = Highcharts.chart('grafico-CIPrestamos-161107279383',{
"chart": {
"type": "column",
"style": {
"fontFamily": "Arial, Tahoma, Sans-serif",
"fontSize": "11px"
}
},
"credits": {
"enabled": false
},
"legend": {
"enabled": true,
"useHTML": true,
"itemMarginTop": 5,
"labelFormatter": function() {
return '<div class="highchartsCustom-legend-label">' + this.name + '</div>';
}
},
"title": {
"text": ""
},
"xAxis": {
"type": "datetime",
"dateTimeLabelFormats": {
"month": "%b"
},
"title": "",
"units": [
["month", [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]]
],
"tickInterval": 1,
"labels": {
"useHTML": true,
"format": "<span class=\"highchartsCustom-xAxis-label\">{value:%b}</span>",
"rotation": 0
},
"plotLines": [{
"color": "#ccc",
"width": 1,
"value": 1525132800000,
"dashStyle": "Dash",
"label": {
"useHTML": true,
"text": "<span class=\"highchartsCustom-xAxis-plotLine-label\">2018</span>",
"rotation": 90
}
}, {
"color": "#ccc",
"width": 1,
"value": 1546300800000,
"dashStyle": "Dash",
"label": {
"useHTML": true,
"text": "<span class=\"highchartsCustom-xAxis-plotLine-label\">2019</span>",
"rotation": 90
}
}]
},
"yAxis": {
"allowDecimals": false,
"min": 0,
"title": "",
"labels": {
"useHTML": true,
"format": "<span class=\"highchartsCustom-yAxis-label\">{value:,.0f}</span>"
},
"stackLabels": {
"enabled": false
}
},
"tooltip": {
"useHTML": true,
"headerFormat": "<table class=\"highchartsCustom-tooltip\">",
"pointFormat": "<tr><td class=\"highchartsCustom-tooltip-fecha\">{point.x:%B %Y}</td></tr><tr><td class=\"highchartsCustom-tooltip-linkedParent\">{point.series.linkedParent.name}</td></tr><tr><td class=\"highchartsCustom-tooltip-serie\">FIELD:{point.series.userOptions.cuotasPendientes[3]}</td></tr><tr><td class=\"highchartsCustom-tooltip-serie\">{point.series.name}: <span>{point.y}</span></td></tr><tr><td class=\"highchartsCustom-tooltip-total\">Total: <span>{point.stackTotal:,.0f}</span></td></tr>",
"footerFormat": "</table>",
"style": {
"padding": "1px"
}
},
"plotOptions": {
"series": {
"pointStart": 1525132800000,
"pointIntervalUnit": "month",
"pointWidth": 20,
"events": {
"legendItemClick": function(event) {
var cantidadSeleccionables = event.target.chart.series.length - 1;
if (event.target.visible && cantidadSeleccionables > contadorCIPrestamos) {
contadorCIPrestamos += 1;
return true;
}
if (!event.target.visible) {
contadorCIPrestamos -= 1;
return true;
}
return false;
}
}
},
"column": {
"stacking": "normal",
"dataLabels": {
"enabled": false
}
}
},
"series": [{
"name": "BCO 1",
"id": "BCO1",
"linkedTo": null,
"data": null,
"color": "#B07CD8",
"CuotasPendientes": null,
"vigente": "La bco es vighente",
"Estado": null,
"CapitalOriginal": 0.0,
"TotalCuotas": 0
}, {
"name": "PP1",
"id": null,
"linkedTo": "BCO1",
"data": [22.0, 23.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0],
"color": "#B07CD8",
"cuotasPendientes": [0, 0, 223, 223, 223, 223, 223, 223, 223, 223, 223],
"vigente": "La serie es vigente",
"Estado": null,
"CapitalOriginal": 0.0,
"TotalCuotas": 0
}],
"colors": ["#B07CD8"]})
console.log(a.series[1].userOptions.cuotasPendientes[5]);
I tried using the formatther and it works, also i doscovered the way to access too.
Instead of using
point.series.cuotasPendientes[2], we have to use point.series.cuotasPendientes.2
Thanks for all.
u can call it directely or loop through CuotasPendientes ur value this way and dont forget to check CuotasPendientes value if its null the loop will not process (i already added it the null check).
console.log(a.series[1].CuotasPendientes[0])
for(let i = 0 ; i < a.series.length; i++){
if (a.series[i].CuotasPendientes != null) {
for (x of a.series[i].CuotasPendientes) {
console.log(x)
}
}
}
Hope its help

Highcharts 5 - Radar Charts with circle round the outside

I'm using Highcharts 5 in styled mode, when I create a radar chart in this mode I get a circle around the outside of the chart.
Styled Mode Example
<script src="https://code.highcharts.com/js/highcharts.js"></script>
<script src="https://code.highcharts.com/js/highcharts-more.js"></script>
<script src="https://code.highcharts.com/js/modules/exporting.js"></script>
<link rel="stylesheet" href="http://code.highcharts.com/css/highcharts.css">
<div id="container" style="min-width: 310px; max-width: 400px; height: 400px; margin: 0 auto"></div>
$(function() {
Highcharts.chart('container', {
"chart": {
"polar": true,
},
"exporting": {
"enabled": true,
"filename": "bar",
"url": "http://export.highcharts.com",
"chartOptions": {
"chart": {
"backgroundColor": "white"
}
}
},
"plotOptions": {
"pie": {
"dataLabels": {
"enabled": true
}
}
},
"series": [{
"data": [
[1379790000],
[1330780000],
[324897000],
[260581000],
[206927000],
[194772000],
[86987000],
[161401000],
[146727405],
[126693000]
],
"id": "series-7"
}],
"xAxis": {
"categories": ["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"],
"title": {},
"labels": {
"rotation": 0,
"enabled": true
},
"lineWidth": 0,
"tickmarkPlacement": "on"
},
"yAxis": {
"title": {},
"gridLineInterpolation": "polygon",
"lineWidth": 0
},
"title": {
"text": "Population of Countries"
},
"subtitle": {
"text": "Bar Chart"
},
"loading": false
});
});
http://jsfiddle.net/8pv79gy9/
However if I run the same configuration in the normal mode used by Highcharts previously I don't get the circle round the outside.
http://jsfiddle.net/fex0hnoy/
Any suggestions or solution welcome, this maybe a Highcharts 5 issue.
In a styled mode lineWidth property is replaced by css stroke-width.
If you want to set axis line width to 0, then you have to use css for axis line class (by default it is 1)
.highcharts-xaxis .highcharts-axis-line {
stroke-width: 0;
}
example: http://jsfiddle.net/8pv79gy9/1/
Or can use yaxis as Circle:
"yAxis": {
"title": {},
"gridLineInterpolation": "circle",
"lineWidth": 0
},
http://jsfiddle.net/8pv79gy9/2/

Full Size AmCharts

I am using AmCharts for my website, I would like to make it full size. FOr example, I have this code:
<style>
#chartdiv {
width : 50%;
height : 500px;
float : left;
}
</style>
<script>
var chart = AmCharts.makeChart( "chartdiv", {
"type": "pie",
"theme": "light",
"autoMargins": false,
"marginTop": 2,
"marginBottom": 2,
"marginLeft": 2,
"marginRight": 2,
"fontSize": 14,
"dataProvider": [
{
"type": "Open Issues",
"number": op
},
{
"type": "Closed Issues",
"number": cl
},
{
"type": "Deferred Issues",
"number": df
},
{
"type": "Vendor Issues",
"number": ve
},
{
"type": "FAQ Issues",
"number": fq
}
],
"valueField": "number",
"titleField": "type",
"export": {
"enabled": true,
"libs": {
"path": "http://www.amcharts.com/lib/3/plugins/export/libs/"
}
}
} );
</script>
<div id="chartdiv"></div>
I want to make the charts expand fully. Is that possible? I referred to their site help. It said to use margins as 0 and set automargins as false, I have tried that but doesn't work.
Try this
width : 100%;
height : 100%;
Make sure you don't have any parent div above chart div.

Categories