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.
Related
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/
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
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/
I am using hightchart plugin in Yii2 application.
Now When I want call some event like click on series point the plugin shows an error Uncaught TypeError: fn.call is not a function please help me.
My Js code for high chart is like that
Highcharts.setOptions([]);
new Highcharts.Chart({
"chart": {
"renderTo": "w0",
"type": "bar"
},
"credits": {
"enabled": false
},
"title": "Timeline content count monthly",
"xAxis": {
"categories": ["Aug 2016"],
"title": false
},
"yAxis": {
"min": 0,
"endOnTick": false,
"allowDecimals": false,
"title": {
"text": "Counts",
"align": "high"
},
"labels": {
"overflow": "justify"
}
},
"plotOptions": {
"bar": {
"dataLabels": {
"enabled": true
}
},
"series": {
"cursor": "pointer",
"point": {
"events": {
"click": "function(){console.log(1); }"
}
}
}
},
"series": [{
"name": "1st Week",
"data": [1]
}, {
"name": "2nd Week",
"data": [4]
}, {
"name": "3rd Week",
"data": [7]
}, {
"name": "4th Week",
"data": [0]
}, {
"name": "5th Week",
"data": [0]
}]
});
Here the data should be generated using an active dataprovider. I think this will not effect. May be it is a Js issue.
libraries are also included correctly. chart is also plotting perfect. only the problem is that whenever I am going to click on point it shows an error.
Thanks.
You have this:
"click": "function(){console.log(1); }"
Should be like this
"click": function() {
console.log(1);
}
There's a zooming bug that we're struggling.
If you zoom in the left side of the chart, the right side of the chart is zoomed.
Simple example:
http://jsfiddle.net/andrut/TfG6c/
I do it like that:
{
"chart": {
"renderTo": "container",
"zoomType": "xy",
"type": "column"
},
"plotOptions": {
"series": {
"groupPadding": 0.04
}
},
"series": [{
"name": "col0",
"data": [{
"y": 93723,
"color": "#773676"
}]
}, {
"name": "col1",
"data": [{
"y": 68630,
"color": "#ff9900"
}]
}]
}
Is there any workaround to fix this? I haven't found anything interesting anywhere...
Thanks,
Karol
You need to set minRange paramter
yAxis:{
minRange: 1000
},
http://jsfiddle.net/TfG6c/1/