We Keep Coding

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/

highcharts stacked column overlaps when toggling the legends visibility

I've created a stacked column chart using highchart it works fine. but when I toggle the visibility of a particular legend the column overlaps each other.
Highcharts.chart('container', {
"chart": {
"type": "column",
"zoomType": "x",
"panning": true,
"panKey": "shift",
"shadow": true,
"style": {
"fontFamily": "RotisSemiSans"
}
},
"title": {
"text": ""
},
"subtitle": {},
"xAxis": {
"type": "datetime"
},
"yAxis": [
{
"title": {
"text": "some value"
},
"opposite": false,
"type": "column"
}
],
"tooltip": {},
"plotOptions": {
"series": {
"stacking": "normal"
},
"line": {
"marker": {
"enabled": false
}
},
"area": {
"marker": {
"enabled": false
}
},
"pointRange": 1
},
"legend": {
"itemWidth": 150,
"maxHeight": 65
},
"credits": {
"enabled": false
},
"series": [
{
}],
});
Tried setting stack name but that too didn't work. setting the pointRange doesn't work either.
see it the JSFiddle

Your idea of using pointRange is a good way of dealing with it, you just misplaced it a bit. You have:
"plotOptions": {
"series": {
"stacking": "normal"
},
// ...
"pointRange": 1
},
Instead do (JSFiddle demonstration):
"plotOptions": {
"series": {
"stacking": "normal"
"pointRange": 5 * 60 * 1000
},
// ...
},
My example above uses 5 minutes, since that appears to be your interval. I am unsure of why it fails in the first place, but this should resolve the overlapping issue.

SVG tooltip z-index with html title

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

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/

Adding labels for the last level in fusioncharts multilevel pie

I am trying to generate a labels for the last level of the category...
This is the one I am looking for...
Created JsFiddle for you
var Cdata={"data":[{"label":"2010","value":"702600","color":"#FF8B3C","category":[{"label":"Public","value":"340394","color":"#FF8B3C","category":[{"label":"Single","value":"91787","color":"#FF8B3C","category":null},{"label":"Married","value":"85787","color":"#FF8B3C","category":null},{"label":"Divorced","value":"77464","color":"#FF8B3C","category":null},{"label":"Widow","value":"85356","color":"#FF8B3C","category":null}]},{"label":"Private","value":"362206","color":"#FF8B3C","category":[{"label":"Single","value":"102443","color":"#FF8B3C","category":null},{"label":"Married","value":"77220","color":"#FF8B3C","category":null},{"label":"Divorced","value":"85393","color":"#FF8B3C","category":null},{"label":"Widow","value":"97150","color":"#FF8B3C","category":null}]}]},{"label":"2011","value":"746880","color":"#A5AC0F","category":[{"label":"Public","value":"358315","color":"#A5AC0F","category":[{"label":"Single","value":"86968","color":"#A5AC0F","category":null},{"label":"Married","value":"92456","color":"#A5AC0F","category":null},{"label":"Divorced","value":"83679","color":"#A5AC0F","category":null},{"label":"Widow","value":"95212","color":"#A5AC0F","category":null}]},{"label":"Private","value":"388565","color":"#A5AC0F","category":[{"label":"Single","value":"100185","color":"#A5AC0F","category":null},{"label":"Married","value":"94838","color":"#A5AC0F","category":null},{"label":"Divorced","value":"96399","color":"#A5AC0F","category":null},{"label":"Widow","value":"97143","color":"#A5AC0F","category":null}]}]},{"label":"2012","value":"789482","color":"#83E0FF","category":[{"label":"Public","value":"383454","color":"#83E0FF","category":[{"label":"Single","value":"104390","color":"#83E0FF","category":null},{"label":"Married","value":"89375","color":"#83E0FF","category":null},{"label":"Divorced","value":"96117","color":"#83E0FF","category":null},{"label":"Widow","value":"93572","color":"#83E0FF","category":null}]},{"label":"Private","value":"406028","color":"#83E0FF","category":[{"label":"Single","value":"99938","color":"#83E0FF","category":null},{"label":"Married","value":"93399","color":"#83E0FF","category":null},{"label":"Divorced","value":"115378","color":"#83E0FF","category":null},{"label":"Widow","value":"97313","color":"#83E0FF","category":null}]}]},{"label":"2013","value":"705560","color":"#ff9999","category":[{"label":"Public","value":"354781","color":"#ff9999","category":[{"label":"Single","value":"98333","color":"#ff9999","category":null},{"label":"Married","value":"87342","color":"#ff9999","category":null},{"label":"Divorced","value":"77118","color":"#ff9999","category":null},{"label":"Widow","value":"91988","color":"#ff9999","category":null}]},{"label":"Private","value":"350779","color":"#ff9999","category":[{"label":"Single","value":"102129","color":"#ff9999","category":null},{"label":"Married","value":"79801","color":"#ff9999","category":null},{"label":"Divorced","value":"81731","color":"#ff9999","category":null},{"label":"Widow","value":"87118","color":"#ff9999","category":null}]}]},{"label":"2014","value":"738714","color":"#e580ff","category":[{"label":"Public","value":"350028","color":"#e580ff","category":[{"label":"Single","value":"69093","color":"#e580ff","category":null},{"label":"Married","value":"100824","color":"#e580ff","category":null},{"label":"Divorced","value":"89057","color":"#e580ff","category":null},{"label":"Widow","value":"91054","color":"#e580ff","category":null}]},{"label":"Private","value":"388686","color":"#e580ff","category":[{"label":"Single","value":"92575","color":"#e580ff","category":null},{"label":"Married","value":"105411","color":"#e580ff","category":null},{"label":"Divorced","value":"86773","color":"#e580ff","category":null},{"label":"Widow","value":"103927","color":"#e580ff","category":null}]}]},{"label":"2015","value":"726130","color":"#9999ff","category":[{"label":"Public","value":"348346","color":"#9999ff","category":[{"label":"Single","value":"84893","color":"#9999ff","category":null},{"label":"Married","value":"92005","color":"#9999ff","category":null},{"label":"Divorced","value":"81349","color":"#9999ff","category":null},{"label":"Widow","value":"90099","color":"#9999ff","category":null}]},{"label":"Private","value":"377784","color":"#9999ff","category":[{"label":"Single","value":"88107","color":"#9999ff","category":null},{"label":"Married","value":"94300","color":"#9999ff","category":null},{"label":"Divorced","value":"101897","color":"#9999ff","category":null},{"label":"Widow","value":"93480","color":"#9999ff","category":null}]}]}]};
FusionCharts.ready(function () {
var topProductsChart = new FusionCharts({
type: 'multilevelpie',
renderAt: 'chart-container',
id : "myChart",
width: '500',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Split of Top Products Sold",
"subCaption": "Last Quarter",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"baseFontColor" : "#333333",
"baseFont" : "Helvetica Neue,Arial",
"basefontsize": "9",
"subcaptionFontBold": "0",
"bgColor" : "#ffffff",
"canvasBgColor" : "#ffffff",
"showBorder" : "0",
"showShadow" : "0",
"showCanvasBorder": "0",
"pieFillAlpha": "60",
"pieBorderThickness": "2",
"hoverFillColor": "#cccccc",
"pieBorderColor": "#ffffff",
"useHoverColor": "1",
"showValuesInTooltip": "1",
"showPercentInTooltip": "0",
"numberPrefix": "$",
"plotTooltext": "$label, $$valueK, $percentValue"
},
"category": Cdata.data
}
});
topProductsChart.render();
});
Suggest us how can we draw the lines for the last level.

You can use annotation feature provided by FusionCharts to draw lines for outer-ring and and add label values. Check out this link to know more about annotations.
You can check implementation example in this updated JSFiddle.
Here's code used for annotations in above JSFiddle:
"annotations": {
"groups": [{
"items": [{
"id": "line1",
"type": "line",
"x": "$chartCenterX + 205",
"y": "$chartCenterY - 50",
"toX": "$chartCenterX + 240",
"toY": "$chartCenterY - 80",
},
{
"id": "linelabel1",
"type": "text",
"x": "$chartCenterX + 245",
"y": "$chartCenterY - 88",
"text": "22.76%",
"fontSize": "11"
}
]
}]
}