Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am trying to have a Highcharts - Spiderweb like This Demo but I need to Update/hard code the yAxis values. I also need to stylize them the color, font and size. can you please let me know how? Is there any way to stop displaying the default units and only display the chart?
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
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'
}, {
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000, 14000],
pointPlacement: 'on'
}]
});
});
Thanks
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
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,
labels: {
formatter: function() {
return null;
}
},
title: {
text: '10'
},
},
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'
}, {
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000, 14000],
pointPlacement: 'on'
}]
});
});
you can also check http://www.highcharts.com/docs/chart-design-and-style/colors for color and style
Related
3 slices in my pie chart fall under same category. It's the gray slices (174, 29, 234). Is it possible to overlay text on cover all 3 slices. Can the overlay text be rotate or curved in order to cover the grey slices.
Here is my working fiddle: https://jsfiddle.net/1h8p257c/
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Types of Actions'
},
subtitle: {
text: 'October 31, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
size:230,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: -50,
format: '{point.y:f}',
color:'black'
},
showInLegend: true
}
},
legend: {
align: 'left',
verticalAlign: 'middle',
layout:'vertical'
},
series: [{
name: 'Types',
colorByPoint: true,
data: [{
name: 'Consent Order 1',
y: 234,
color:'#808080',
legendIndex: 1
}, {
name: 'Consent Order 2',
y: 29,
color:'#C0C0C0',
legendIndex: 2
}, {
name: 'Consent Order 3',
y: 174,
color:'#DCDCDC',
legendIndex: 3
},{
name: 'Not Likely',
y: 165,
color:'#1E90FF',
legendIndex: 4
}, {
name: 'No Testing',
y: 2,
color:'#FF0000',
legendIndex: 5
}]
}]
});
If they're all the same category, why not just combine them like so:
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Types of Actions'
},
subtitle: {
text: 'October 31, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
size:230,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: -50,
format: '{point.y:f}',
color:'black'
},
showInLegend: true
}
},
legend: {
align: 'left',
verticalAlign: 'middle',
layout:'vertical'
},
series: [{
name: 'Types',
colorByPoint: true,
data: [{
name: 'Consent Order 1 - 3',
y: 437,
color:'#808080',
legendIndex: 1
}, {
name: 'Not Likely',
y: 165,
color:'#1E90FF',
legendIndex: 4
}, {
name: 'No Testing',
y: 2,
color:'#FF0000',
legendIndex: 5
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://codehighcharts/modules/exporting.js"></script>
<script src="https://codehighcharts/modules/data.js"></script>
<script src="https://codehighcharts/modules/drilldown.js"></script>
<script src="https://codehighcharts/modules/export-data.js"></script>
<div id="container"></div>
Or does the separation matter?
You can use Highcharts.SVGRenderer to add additional text to the chart:
events: {
load: function(){
var center = this.series[0].points[2].shapeArgs;
this.renderer.text(
'someText',
center.x + this.plotLeft - 20,
center.y + this.plotTop + 50
).attr({
fill: 'red',
'font-size': '20px',
rotation: -45,
zIndex: 10
})
.add();
}
}
Live demo: https://jsfiddle.net/BlackLabel/t04gqy2h/
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
The link below is the example of bubble overlapping, I want to know if I can show the data-label of the top overlapping bubble. In this case, show the label of the yellow bubble which is 'DE'.
- Example of overlapping
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: Euromonitor and OECD'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [
{ x: 50, y: 50, z: 50, name: 'BE', country: 'Belgium', color:'red' },
{ x: 50, y: 51, z: 50, name: 'DE', country: 'Germany', color:'yellow' },
{ x: 100, y: 100, z: 50, name: 'DE', country: 'Germany' }]
}]
});
});
Following is the chart that I have,
I want to add xaxis for both the charts depending on their data inputs,
where should I make the change or add xaxis so that I can define the min max limits for the xaxis.
here is the fiddle: http://jsfiddle.net/pratik24/n24s2fyk/3/
code:
$(function () {
$('#container').highcharts('StockChart', {
navigator:{
enabled: false
},
scrollbar:{
enabled: false
},
rangeSelector : {
selected : 1,
enabled:false
},
yAxis: [{
min: -1e6,
max: 1e6,
labels: {
align: 'left',
format : ''
},
title: {
text: 'OHLC'
},
height: '30%'
}, { min: -1e6,
max: 1e6,
labels: {
align: 'left',
x: -3,
format : ''
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0
}],
series: [{
inverted: true,
type: 'scatter',
name: 'AAPL',
data: [7.0, 6.9, 9.5, 14.5, 18.4],
yAxis: 0
}, {
inverted: true,
type: 'scatter',
name: 'Volume',
data: [3,6,8,5,2],
yAxis: 1
}]
});
});
Thanks in advance,
Here is the solution:
[http://jsfiddle.net/pratik24/uga37ox0/2/][1]
[http://jsfiddle.net/uga37ox0/1/][1]
thanks to the guys from highcharts suppot team
xAxis: [{
},{
offset: -245,
min: 0,
max: 10
}],
series: [{
inverted: true,
type: 'scatter',
name: 'AAPL',
data: [7.0, 6.9, 9.5, 14.5, 18.4],
yAxis: 0,
xAxis: 1
}, {
inverted: true,
type: 'scatter',
name: 'Volume',
data: [3,6,8,5,2],
yAxis: 1,
xAxis:0
}]
I'm trying to add Highcharts to my page, but the problem is my DIV tag size is quite small (233px,98px) and I want to show minorTickInterval in it, but highcharts truncate them because of small DIV size.
http://jsfiddle.net/a62nhs7f/
Is there anyway to show the inner lines of the interval in the small size?
var options = {
title: {
text: ''
},
labels: {
enabled: false
},
title: {
text: '',
align: 'high',
enabled: false
},
subtitle: {
text: '',
align: 'high',
enabled: false
},
/*
xAxis: {
tickInterval: 1,
breaks: [{
from: 5,
to: 10,
breakSize: 1
}]
},
*/
legend: {
enabled: false
},
yAxis: {
gridLineWidth:1,
lineWidth: 1,
min: 0,
//tickWidth: 1,
minTickInterval:5,
minorGridLineWidth:1,
minorTickInterval: 0.1,
minorTickLength: 2,
//type: 'logarithmic',
minorTickInterval: 5,
//minorTickInterval: 'auto',
//minorTickLength: 0,
title: {
text: '',
//align: 'high',
enabled: false
},
labels: {
//enabled: false,
style: {"font-size":'8px'},
formatter: function() {
return this.value;
}
}
},
xAxis: {
min: 0,
tickmarkPlacement: 'on',
title: {
enabled: false
},
labels: {
enabled: false
},
/*gridLineColor: '#c9d5ba',
gridLineWidth: '1',
lineColor: '#222222',
lineWidth: 0,*/
categories: [1.2, 2, 3.1, 4.3, 5.1, 5.9, 6.7, 7.5, 8.3, 9.1, 9.8, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
labels: {
formatter: function () {
return '<a style="color:green" data-value="' +[this.value] + '">' +
this.value + '</a>';
},
style: {"font-size":'8px'}
}
},
series: [{
data: [5.7, 11.1, 22.2, 38.1, 51, 66.6, 83.3, 101.1, 118.6, 135.7, 150.9, 161.4, 169.2, 172.8, 176.8, 178.5, 179.7, 179.9, 180, 179.9, 179.1]//,
//pointInterval: 500
}]
};
Thanks
You can disable the line markers. I think It is better solution for you.
plotOptions: {
line: {
marker: {
enabled: false
}
}
},
Chek my demo.
The x-axis label disappears for a polar chart with any endAngle other than default (360)
Works without endAngle: http://jsfiddle.net/qs5v601b/1/
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing'],
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],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000],
pointPlacement: 'on'
}]
});
});
Does not work with endAngle : http://jsfiddle.net/qtpq84nw/
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%',
endAngle: 90
},
xAxis: {
categories: ['Sales', 'Marketing'],
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],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000],
pointPlacement: 'on'
}]
});
});
Does anyone know what is causing this?
You need to enable showLastLabel parameter.