We Keep Coding

Highcharts Spiderweb chart xAxis labels disappear on long label name

I have a spiderweb chart with 12 labels on the x-axis. This chart is multilingual. In English, all labels show just fine. In German, due to the long names, some labels are hidden.
Highcharts.chart('container', {
chart: {
polar: true,
type: 'line',
animation: false,
},
title: {
text: "Does what ever a spider can",
},
pane: {
size: '80%'
},
xAxis: {
categories: [
"Strategisches Denken",
"Kreatives und innovatives Denken",
"Change Management",
"Mitarbeiterentwicklung",
"Kommunikation",
"Teamarbeit",
"Entscheidungsfindung",
"Kundenorientierung",
"Ergebnisorientierung",
"Selbstmanagement",
"Leistungsmotivation",
"Verantwortungsbewusstsein"
],
tickmarkPlacement: 'between',
lineWidth: 0,
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
max: 5,
tickInterval: 1,
},
tooltip: {
enabled: false,
},
legend: {
enabled: true,
verticalAlign: 'top'
},
plotOptions: {
series: {
animation: false
}
},
series: [{
name: "Stuff",
data: [1,2,3,4,5,4,3,2,1,2,3,4],
}],
});
Fiddle here.
This produces a Spiderweb chart where the xAxis labels "Kreatives und innovatives Denken", "Entscheidungsfindung" and "Verantwortungsbewusstsein" are hidden. If I replace these names with shorter names they do display.
I've tried making the font size smaller, but all labels are displayed when font size is 5 (default is 11). This is unforunately unacceptably small.
I can't find any fixed character length or even amount of line breaks after which a label disappears. It seems to be calculated dynamically based off of a labels position and neighboring labels. (Otherwise I would've been happy with truncating strings.)
Is there some setting to force all labels to show?

You can use internal allowOverlap property:
xAxis: {
labels: {
allowOverlap: true
},
...
}
Live demo: https://jsfiddle.net/BlackLabel/ok7Lrn5j/

Sankey: Show dynamically text on x-axis

How to show dynamic text on x-axis based on transition. In my first case, I am getting two transitions(football -> basketball & basketball -> Gerard) so I will be showing two labels just like below
But When we get only one transition so how to handle label on the x-axis. What I need is when only one transition is there one label should only come. In the below case Semi-Final label should come.
Highcharts.chart('container', {
chart: {
showAxes: true
},
title: {
text: ''
},
xAxis: {
type: "category",
categories: ['Semi-Final','Final Phase'],
max: 2,
labels: {
x: 10,
y: 30,
},
lineColor: 'transparent',
tickLength: 0
},
yAxis: {
visible: false
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['Football', 'Cricket', 20 ],
],
type: 'sankey',
}]
});

The number of displayed labels depends on axis extremes. You can make max property dependent on the number of data:
events: {
load: function() {
var max = this.series[0].nodeColumns.length - 2;
this.xAxis[0].update({
max: max
})
}
}
Live demo: https://jsfiddle.net/BlackLabel/7s5h41qr/
API: https://api.highcharts.com/highcharts/xAxis.max

Highcharts area charts with single data, not rendering

I have an area chart with three series x-axis is 'datetype', when there is only data in each series the labels on x and y axis appears as expected but the plot point is missing. Can't expect a filled area for one data but even the plot point is missing.
'minRange' property is set and so the label is showing the date from the data.
Is this expected or there is a property that needs to be set to see the plot points.
fiddle link here http://jsfiddle.net/bM9j9/6/
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Area chart'
},
xAxis: {
type: 'datetime',
minRange: 864e5
},
yAxis: {
min: 0
//tickInterval: 0.5,
//minRange: 0.5
},
credits: {
enabled: false
},
plotOptions: {
area: {
stacking: 'normal',
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'Open',
data: [
[Date.UTC(2010, 0, 3), 120]
]
}, {
name: 'Closed',
data: [
[Date.UTC(2010, 0, 3), 60]
]
}, {
name: 'Accepted',
data: [
[Date.UTC(2010, 0, 3), 89]
]
}]
});
});

actually the data is rendered, But you cannot see it because the marker radius of the point is 0 in normal sate but it will be visible when your mouse hovers on it.
this is happening because you have disabled marker and have enabled hover for it.
To get the points visible turn them on.
plotOption: {
area:{
marker: {
enabled: true,
-----continue with other properties----
}
}
}
updated your fiddle here: http://jsfiddle.net/bM9j9/7/
Hope this will help you.

HighCharts and idTabs - Charts width not setting properly

I have a webpage with HighCharts and idTabs plugins installed. I just want to show 1 chart at time, so hi got them in multiple tabs. The html code is:
<ul class="idTabs">
<li>Points</li>
<li>Kills and deaths</li>
<li>Damage</li>
<li>Bombs</li>
</ul>
<div id="vpPointsGraphWrapper"><div id="vpPointsGraph"></div></div>
<div id="vpKillsDeathsGraphWrapper"><div id="vpKillsDeathsGraph"></div></div>
<div id="vpDamageGraphWrapper"><div id="vpDamageGraph"></div></div>
<div id="vpBombsGraphWrapper"><div id="vpBombsGraph"></div></div>
Until this point is all okey, the charts have their data, and all is okey except one thing, the width. The chart that is showed by default (vpPointsGraph) has the correct width (100% of the div that contains them), but the others take the width that correspond to the width of the monitor, overflowing out of the wrapper div. I think the problem is that they want to get the wrapper div width, but as its hidden they take the whole screen width. ¿Is there anyway to fix this?
Thanks for your answers.
Edit: I solved it, check the next answer for explanation.

Solution: http://jsfiddle.net/5kLdG/
What i have done its just getting the width of the container i want the chart to fit in, and setting it in the highcharts 'width' parameter. I don't know if its the best solution but it worked for me.
//Get wrapper width
var width = $('#wrapper').width()
//Points Graph
var pointsChart = new Highcharts.Chart({
chart: {
renderTo: 'vpPointsGraph',
type: 'line'
},
title: {
text: 'Points'
},
xAxis: {
title: {
text: 'Match'
},
categories: [1,2,3,4,5,6,7],
reversed: true
},
yAxis: {
title: {
text: 'Points'
},
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: ''
},
plotOptions: {
line: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Points',
data: [5,6,7,8,3,6,8]
}]
});
//KillsDeaths Graph
var killsDeathsChart = new Highcharts.Chart({
chart: {
renderTo: 'vpKillsDeathsGraph',
type: 'line',
width: width
},
title: {
text: 'Kills and Deaths per match'
},
xAxis: {
title: {
text: 'Match'
},
categories: [1,2,3,4,5],
reversed: true
},
yAxis: {
title: {
text: 'Number'
},
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: ''
},
plotOptions: {
line: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Kills',
data: [6,8,2,2,5]
}]
});

highcharts grid lines are dissappearing on zoom

I am using highcharts to display charts in my project. Everything is great but when I use zoom buttons the grid lines are dissapearing.
Does anyone know what could be the reason for this?
Below is my code. I did not change much from the examples provided in highcharts.com.
I get the chart with grid lines first without any problem. Only when I use zoom buttons grid lines dissapear. This is not happening with highcharts examples.
var chart = new Highcharts.StockChart({
chart: {
renderTo: <id of my div>
},
rangeSelector: {
buttons: [
{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}
],
selected:3,
inputPosition:{
x:25,
y:25,
align:"left"
},
align:"left"
},
title: {
margin:40,
text: title,
style:{
color:"#000",
fontFamily: "AvenirNextLTW01-MediumC 721311 !important",
fontWeight:"bold",
fontSize:"12px"
}
},
scrollbar : {
enabled : false
},
yAxis: [{
title: {
text: ytitle
},
lineWidth: 2,
}],
credits: {
enabled: false
},
exporting: {
enabled: false
},
loading:{
style: {
position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
textAlign: 'center'
}
},
tooltip:
{
valueDecimals: 2,
style:{
fontSize:'9px'
}
},
series: [
{
type: 'line',
color: '#4572A7',
name: title,
data: <data array>
}]
});
Edit: I have used the following plug in my website for grouping categories in x-axis. The above problem occurs wherever I used this plugin. Can anybody suggest what I can change to get rid of this problem? Or can anyone suggest an other plugin which gives this functionality?
http://blacklabel.github.io/grouped_categories/
I have used this plugin code in following jsfiddle and could reproduce the issue.
Click on zoom(1y,6m) buttons in this fiddle and observe that grid lines are disappearing
http://jsfiddle.net/92NDX/