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.
Related
https://codepen.io/nmnuou/pen/VwQQBNR
The default stroke of the spiderweb is set to 2 and 3 for mouse over.
I'd like to change this to 1 and 2. If you set stroke-width to highcharts-graph in css, you can change the line thickness, but there is no mouseover.
enter code here
Highcharts.chart('info_chart', {
chart: {
polar: true,
type: 'area',
},
accessibility: false,
title: false,
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration', 'ghj'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
max: 150,
tickInterval:50
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: false,
colors: ['#FF5D87'],
series: [{
name: 'Allocated Budget',
data: [73, 89, 60, 55, 97, 110, 60],
pointPlacement: 'on'
,strokeWidth:1
,max:100,
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
pane: {
size: '70%'
}
}
}]
}
});
I am completely new to Highcharts and need to design a horizontal bar chart that looks exactly like the image below.
I've tried fiddling around and managed to display the 4 and 2 inside the bars. However, I'm unable to display the text 'Completed' above the first bar and the text 'To Action' below the second bar. I also want to eliminate the gap between the bars. Below is my code so far.
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
//marginLeft:120,
type:'bar'
},
legend: { enabled: false},
colors:['#173c64'],
xAxis: {
categories: ['4','2'],
labels: {
align:'left',
x:5,
style: {
fontSize: '4em',
color:'#fff'
}
},
lineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
title: {
enabled: false
}
},
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
title: {
enabled: false
}
},
title: {
margin:0,
useHTML: true,
text: "This Month",
style: {"color": "#333333", "fontSize": "1.5rem","fontWeight": "bold"}
},
series:[{
data:[{y: 20, color:'#0091dc'},{y: 17, color:'#173c64'}]
}]
});
Added the subtitle for Completed and added custom label to footer for To Action and for removing space between bars added plotOptions with
groupPadding: 0,pointPadding: 0, in chart
This is near to your requirements. Hope this helps
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
//marginLeft:120,
type: 'bar',
events: {
load: function() {
var label = this.renderer.label("To Action")
.css({
width: '100px',
fontSize: '1.5rem'
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'left',
x: 0, // offset
verticalAlign: 'bottom',
y: -30 // offset
}), null, 'spacingBox');
}
},
marginBottom: 120
},
legend: {
enabled: false
},
colors: ['#173c64'],
xAxis: {
categories: ['4', '2'],
labels: {
align: 'left',
x: 5,
style: {
fontSize: '4em',
color: '#fff'
}
},
lineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
title: {
enabled: false
}
},
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
title: {
enabled: false
}
},
plotOptions: {
bar: {
stacking: "normal",
groupPadding: 0, //add here
pointPadding: 0, //add here
}
},
title: {
margin: 0,
useHTML: true,
text: "This Month",
style: {
"color": "#333333",
"fontSize": "1.5rem",
"fontWeight": "bold"
}
},
subtitle: {
align: 'left',
y: 40, //offset
useHTML: true,
text: 'Completed',
style: {
"color": "#333333",
"fontSize": "1.5rem"
}
},
series: [{
data: [{
y: 20,
color: '#0091dc'
}, {
y: 17,
color: '#173c64'
}]
}]
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
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'm trying to build an NBA shot chart generator using Highcharts. So far I've managed to gather the data and plot it, but I'm unable to overlay a court diagram over the chart to finish the job because of the extra space at the right and bottom of the chart.
Here's an Imgur gallery demonstrating what I have now and what I'm trying to achieve.
This is the code I'm using to generate the charts:
var drawChart = function(made, missed) {
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
width: 500,
height: 470
},
title: {
text: ""
},
xAxis: {
title: {
enabled: false
},
lineWidth: 0,
gridLineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
},
yAxis: {
title: {
enabled: false
},
lineWidth: 0,
gridLineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 250,
y: 400,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
credits: {
enabled: false
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} ft, {point.y} ft'
}
}
},
series: [{
name: "Made",
color: 'rgba(223, 83, 83, .5)',
data: made
}, {
name: "Missed",
color: 'rgba(119, 152, 191, .5)',
data: missed
}
]
});
});
}
I've tried fiddling with various spacing and margin options but haven't had any luck.
Thanks.
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.