I am working on an application which users can switch the chart type from Spider web chart to Column Chart or Vice Versa. But As you can see from the code snippet when I change the Spider Web Type to column and disable the polar property the first column of the chart sticks to Y axis and so on with the last column as show in the image:
$(function () {
$('#container').highcharts({
chart: {
// polar: true,
type: 'column'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [43000, 19000, 60000, 35000, 17000, 10000],
pointPlacement: 'on'
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
I already tried to fix this by adding offset to Y axis
yAxis: {
lineWidth: 1,
offset: 70,
title: {
text: 'Primary Axis'
},
But it didn't do the job! can you please take a look at demo and let me know how I have to deal with this?
The problem is caused by pointPlacement in the series:
pointPlacement: 'on'
If you remove this, the chart renders as you want.
Related
I'm looking to change the spider lines of the Highcharts spider web graph. I'm using a JSFiddle by someone else since mine isn't working for some reason.
I want to be able to change the line colors of the spider lines. What property do I change to get that?
$('#emotion-ranking-graph-bar').highcharts({
chart: {
polar: true,
type: 'line',
backgroundColor: 'rgba(255,255,255,0.0)'
},
exporting: {
enabled: false
},
title: {
text: '',
x: 0
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Joy', 'Sorrow', 'Anger', 'Seriousness',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0,
labels: {
enabled: true
}
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
color: 'rgba(255,255,255,1)',
labels: {
enabled: false
}
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
enabled: false
},
series: [{
name: 'Emotional Analysis Spectrum',
data: [43000, 19000, 60000, 35000, 17000, 10000],
pointPlacement: 'on',
color: 'rgba(0,0,0,0.7)'
}]
})
The lines going from the center to the outside are the yAxis, and the lines making the pentagon are the xAxis. You have to change the gridLineColor option on both:
http://jsfiddle.net/przJs/41/
Here you have a lot of options to fiddle: http://api.highcharts.com/highcharts/xAxis.gridLineColor
I've made a spider chart using highcharts but the data points have moved to the far left. I'm following this example. Here is my code:
<div id="container2" style=" position: relative;"></div>
<script>
$(function () {
$('#container2').highcharts({
chart: {
polar: true,
type: 'line',
margin: 0
},
exporting: {
enabled: false,
buttons: {
enabled: false
}
},
title: {
text: ' ',
x: -80,
useHTML: true
},
pane: {
size: '70%'
},
xAxis: {
categories: ['Math', 'Comp. Sci', 'Science', 'Social Sci.', 'English', 'Hindi'],
tickmarkPlacement: 'on',
lineWidth: 0,
labels: {
align: 'center',
distance: 43
}
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
endOnTick: true,
showLastLabel: true,
tickPositions: [0.2, 0.4, 0.6, 0.8, 1.0]
},
tooltip: {
shared: true,
headerFormat: '<span style="font-size: 12px">{point.key}:</span> <b>{point.y:,.2f}</b>',
pointFormat: '',
useHTML: true
},
legend: {
enabled: true,
align: 'right',
verticalAlign: 'top',
y: 30,
layout: 'vertical'
},
series: [{
name: 'Grade Distribution',
data: [.8, .95, .7, .35, .6, .3],
pointPlacement: 'on',
color: 'black',
fillOpacity: 0.2
}]
});
});
I looked for an interfering css in my code, but didn't find anything. Any idea what could be causing this?
There is no issue with the same code,
<div id="container2" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
DEMO
You may have an old version of highchart. Downloading the latest version fixed the problem for me.
I'm working with some small size charts in Highcharts, and it seems that due to the size Highcharts is showing labels for only alternating ticks on the x-axis. What I'd like to do to show the label for every tick on the x-axis, even if it means using a smaller font. I haven't been able to figure out how to do this.
I'm loading csv data from a pre HTML block.
Here's the code:
<body>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/data.js"></script> <div id="container"></div>
</body>
<div id="chart_left_1" style="min-width: 200px; max-width: 350px; height: 200px;"></div>
<pre id="gdpgr" style="display:none">year,gdp_yoy,us_gdp_yoy,
2009,1.9000,-2.1000,
2010,7.6000,3.8000,
2011,6.0000,3.7000,
2012,0.9000,4.1000,
2013,-0.1000,3.2000,
2014,5.8000,4.1000,
</pre>
$(function () {
$('#chart_left_1').highcharts({
chart: {
borderColor: '#000080',
borderRadius: 0,
borderWidth: 2
},
title: {text: 'GDP Growth', margin: 0},
exporting: {enabled: false},
legend: {enabled: false},
subtitle: {text: null},
xAxis: {
},
yAxis: {
tickInterval: 2,
title: {text: null},
labels: {
formatter: function() {
return this.value + '%';
}
},
},
tooltip: {
enabled: true,
valueSuffix: '%'
},
data: {
csv: document.getElementById('gdpgr').innerHTML,
startRow: 1,
endRow: 11,
endColumn: 2,
firstRowAsNames: false
},
xAxis: {
allowDecimals: false
},
series: [{
type: 'column',
name: ' GDP growth',
color: '#000080'
},{
type: 'column',
name: 'US GDP Growth',
color: '#CCCCCC'
}]
});
});
And Here's a jsFiddle: https://jsfiddle.net/otfq0dch/1/
In this case, if you dont need to use other type of xAxis than category, you can use step label's property.
xAxis: {
type: 'category',
allowDecimals: false,
labels: {
step: 1
}
},
Example: https://jsfiddle.net/otfq0dch/3/
http://api.highcharts.com/highcharts/xAxis.labels.step
the xAxis is defined twice, i consolidate and added a new option called tickInterval which is set to 1
https://jsfiddle.net/otfq0dch/2/
xAxis: {
allowDecimals: false,
tickInterval: 1
},
link to the docs: http://api.highcharts.com/highcharts/xAxis.tickInterval
xAxis: {
type: 'category',
allowDecimals: true,
labels: {
step: 1
}
},
I want to create barchart having custom horizontal lines added to show average benchmarks. Also there is labels added on these lines to show benchmark heading. I get line labels cut off as shown in following image.
Barchart
Also if plot line value is beyond the range plotted, plot line get hidden. How to handle this case in highchart? Following is the code that I am using.
$(function () {
$('#chartContainer').highcharts({
credits: {
enabled: false
},
colors: ['#3C791D','#BEBEBE','#7F7F7F'],
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['Great', 'Neutral', 'Bad']
},
yAxis: {
title: {
text: ''
},
plotLines:[{
value:80,
color: '#000000',
width:2,
zIndex:4,
label:{
text:'XYZ Average: 80%',
align: 'right'
}
},{
value:60,
color: '#000000',
width:2,
zIndex:4,
label:{
text:'PQR Average: 60%',
align: 'right'
}
}]
},
legend: {
enabled : false
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter:function() {
return this.y + '%';
}
},
colorByPoint: true,
enableMouseTracking: false
}
},
series: [{
type: 'column',
name: "s",
data: [70, 10, 40]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<html>
<body>
<div id="chartContainer"></div>
</body>
</html>
Set height for the chart and also the max value for Y-axis
chart: {
height: 600
},
yAxis: {
min: 0,
max: 100
}
Updated :I'm trying to make a radar chart with hightcharts, but I can't connect this values(the ones which has asterisks for example):
$('#container').highcharts({
plotOptions: {
series: {
enableMouseTracking: false
}
},
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Graph',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ["Sponsor / Developer","Banks","SPV","Bank Legal DD","Services Legal contracts","Environmental license","Grid connection license","Construction License","Generation License","Site Studies\/License","Property\/terrain","Technical studies","EPC","Financial model"],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style=\'color:{series.color}\'>{series.name}: <b>\${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{"name":"Legal","data":[4,3,4,4,4,4,4,null,null,null,null,null,null,4],"color":"#206ef0"},{"name":"Licenses and Permits","data":[null,3,null,null,null,4,4,4,4,4,4,null,null,null],"color":"#f07820"},{"name":"Technical","data":[null,null,null,null,null,null,null,null,null,null,4,4,4,null],"color":"#ff0000"},{"name":"Financial","data":[null,null,null,null,null,null,null,null,null,null,null,null,null,null]}]});
<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
The goal is to connect the series'limit of any series. I mean, if in excel I have the same series, financial model and Sponsor/Developer will be connected by a blue line. Look :
excel graph
How can I do it?
Thank you.
In the chart you can use scatter serie with enabled lineWidth. After last point, add reference to first point, then line will be printed.
{
"name": "Legal",
"data": [[0,4], [1,3], [2,4], [3,4], [4,4], [5,4], [6,4], null, null, null, null, null, null,[13,4],[0,4]],
"color": "#206ef0"
}
You can set line on the edge, by setting tickInterval / endOnTick / max options.
yAxis: {
max:4,
tickInterval:1,
endOnTick:true,
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
Example: http://jsfiddle.net/rLfj69b9/8/