I want to display a small polar chart on my web site.
But there is an anoying behaviour. the container (circle) of the chart do not fit with the chart, it grow step by step. If a value is just too big, the chart will be lost in a huge empty circle.
Please, have a look on this jsfiddle to understand the problem :
http://jsfiddle.net/7zmT9/
Is it possible to force the frame to fit the chart? or to reduce the step value?
Here is my code :
$(function () {
$('#container').highcharts({
chart: {
polar: true,
height: 252,
width: 262
},
pane:{
size: '100%',
},
title: {
text: 'Highcharts Polar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 20], // replace 20 by 18 to see the a more fitted chart
pointPlacement: 'between'
}, {
type: 'line',
name: 'Line',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'area',
name: 'Area',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});
});
Universal solution is to set maxPadding: 0 and sometimes endOnTick: false. See demo: http://jsfiddle.net/7zmT9/4/
yAxis: {
min: 0,
maxPadding: 0
},
You can indeed set the step, but I am not 100% sure if this is what you are looking for.
On your yAxis you can set the tickInterval
yAxis: {
min: 0,
tickInterval: 2 //change this value to suit your needs
},
I have updated your Fiddle. Is that what you are after?
Related
Hi i am working on highcharts i am having a polar chart and i wanna display on y-axis time instead of angle. This is the one which i tried so far:
In x-axis i am having angle and i have given tickInterval: 45, so in the same way how to do this for time.
Highcharts.chart('container', {
chart: {
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
subtitle: {
text: 'Also known as Radar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
format: '{value}°'
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}, {
type: 'line',
name: 'Line',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}]
Demo
The process is the same as in a non-polar chart. You can use datetime axis type and data in [x, y] format.
It is also possible to use categories, example: https://jsfiddle.net/BlackLabel/L5p6krvd/
xAxis: {
type: 'datetime'
},
series: [{
data: [
[new Date('2020-5-12').getTime(), 115],
[new Date('2020-5-13').getTime(), 50],
...
]
}]
Live demo: https://jsfiddle.net/BlackLabel/pv0zm2ky/
API Reference: https://api.highcharts.com/highcharts/xAxis.type
In this jsFiddle when all the series are de-selected except for series 1, it reads '-1'. Is this a bug in high charts or something I am doing wrong? I have tried a couple things, such as messing with the offset, showEmpty, nothing seems to work. Any ideas?
http://jsfiddle.net/mhant47c/1/
$('#container').highcharts({
chart: {
type: 'bar'
},
yAxis: [{
width: '33.33%',
showLastLabel: false,
id: 'yA0'
}, {
left: '33.33%',
width: '33.33%',
offset: 0,
showLastLabel: false,
id: 'yA1'
}, {
left: '66.66%',
width: '33.33%',
offset: 0,
id: 'yA2'
}],
plotOptions: {
series: {
stacking: 'normal'
}
},
xAxis:{
showEmpty:false,
categories:['a','b','c','d']
},
series: [{
data: [1, 2, 3, 4]
}, {
data: [3, 2, 1, 6]
},
{
yAxis: 1,
data: [23, 43, 56,23, 43, 56]
},{
yAxis: 1,
data: [23, 43, 56,23, 43, 56]
}, {
yAxis: 2,
data: [123, 413, 516,23, 43, 56]
}]
});
The chart tries to center the columns which results in adding an additional category. To prevent this, use min option:
xAxis: {
min: 0,
...
},
Live demo: http://jsfiddle.net/BlackLabel/6p84vx53/
API Reference: https://api.highcharts.com/highcharts/xAxis.min
See the attached image. So basically What I need is to draw rows with the chart. Like in image below, I want to show temperature on the chart as a line and snow/rain on the rows aligned with the axis. I have the temperature, rain and snow data in my series array.
Sample Data (For rain and snow, 1 mean yes):
series: [{
type: 'line',
data: [1,2,3,4,5,6,7,5,4,3,9,7],
name: 'Temperature'
}, {
data: [0,1,0,0,0,0,1,0,1,0,0,0],
name: 'Rain'
},{
data: [0,1,0,0,0,0,1,0,0,0,0,0],
name: 'Snow'
}]
You can use Renderer to draw a table but the data will not be treated as series but they will be simple static numbers with lines. However, you can use a heatmap series to have a chart as in the image.
You need 4 y axis - 1 for line, 2 for labels and the last two for snow and rain. The rest is adjusting axis positions though height and top properties.
Highcharts.chart('container', {
chart: {
spacingBottom: 0,
marginBottom: 0
},
legend: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
visible: false
},
yAxis: [{
height: '60%',
title: {
text: null
}
}, {
height: '10%',
top: '60%',
gridLineWidth: 0,
offset: 0,
endOnTick: false,
startOnTick: false,
title: {
text: null
},
visible: false
}, {
height: '10%',
top: '70%',
gridLineWidth: 0,
offset: 0,
// min: 0, max: 0,
endOnTick: false,
startOnTick: false,
title: {
text: null
},
categories: ['Rain']
}, {
height: '10%',
top: '80%',
gridLineWidth: 0,
offset: 0,
endOnTick: false,
startOnTick: false,
title: {
text: null
},
categories: ['Snow']
}],
colorAxis: {
stops: [
[0, 'white'],
[1, 'red']
]
},
plotOptions: {
heatmap: {
borderColor: 'black',
borderWidth: 0.5
}
},
series: [{
data: [1, 2, 3, 4, 5, 6, 7, 5, 4, 3, 9, 7],
name: 'Temperature',
step: 'left'
}, {
yAxis: 1,
type: 'heatmap',
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(v => [0, v, 'white']),
showInLegend: false,
enableMouseTracking: false,
keys: ['y', 'value', 'color'],
dataLabels: {
enabled: true
}
}, {
yAxis: 2,
type: 'heatmap',
data: [0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0].map(v => [0, v]),
name: 'Rain'
}, {
type: 'heatmap',
yAxis: 3,
data: [0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0].map(v => [0, v]),
name: 'Snow'
}]
});
example: http://jsfiddle.net/euLz99mk/
I have been trying to get rid of the gap on the left and nothing works. This issues only happens when I add a reverse yAxis on the right. Below is the code I am using:
$(function () {
var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$('#container').highcharts({
chart: {
type: 'areaspline',
zoomType: 'xy',
},
title: {
text: 'Stats',
},
subtitle: {
text: 'YTD 2013 - 2014',
},
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickInterval: 1,
minPadding: 0,
maxPadding: 0,
startOnTick: true,
endOnTick: true,
},
yAxis: [{ //--- Primary yAxis
min: 0,
minPadding: 0,
maxPadding: 0,
startOnTick: true,
endOnTick: true,
title: {
text: 'Mds',
style: {
color: '#8dc63f',
}
},
labels: {
style: {
color: '#8dc63f',
fontWeight: 'bold'
}
}
}, { //--- Secondary yAxis
labels: {
formatter: function () {
var mil = '$';
return mil + Highcharts.numberFormat(this.value, 0);
},
style: {
color: '#3fb4ed',
fontWeight: 'bold'
}
},
title: {
text: 'Revenue',
style: {
color: '#3fb4ed',
}
},
opposite: true
}],
series: [{
type: 'areaspline',
color: '#005a84',
fillOpacity: 0.2,
yAxis: 0,
zIndex: 3,
name: 'Goals',
data: [5, 5, 5, 5, 6, 8, 8, 8, 10, 10, 10, 10],
}, {
type: 'areaspline',
color: '#8dc63f',
fillOpacity: 0.2,
yAxis: 0,
zIndex: 4,
name: 'This Year',
data: [21, 14, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0],
}, {
type: 'areaspline',
color: '#d9531e',
fillOpacity: 0.2,
yAxis: 0,
zIndex: 3,
visible: false,
name: 'Last Year',
data: [20, 2, 2, 7, 8, 5, 7, 3, 2, 2, 5, 5],
}, {
type: 'column',
color: '#3fb4ed',
fillOpacity: 0.2,
yAxis: 1,
zIndex: 1,
visible: false,
name: 'Revenue',
data: [1, 1, 1, 1, 1, 1, 1, 1, 3, 4, 4, 2]
}]
});
});
I have tried every possible solutions out there. Went through API docs and searched every forum. Any help would be much appriciated.
You can set for xAxis:
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickInterval: 1,
minPadding: 0,
maxPadding: 0,
min: 0.5, // remove padding
max: categories.length - 1.5, // remove padding
startOnTick: false, // allow to start not from tick
endOnTick: false // allow to end not at tick
},
Example: http://jsfiddle.net/p2EYM/24/ - turn on Revenue - you will see that first and last column will be cut off.
The reason it is doing this is because, even though the series is hidden on load, you have a column series that needs the width to display. If you just show series "Revenue" you can see it is using that empty space that was there before. You could also play with tickPixelInterval - but for that you need to not use a categorized xAxis.
See this example.
I also set showEmpty to false for both yAxis elements.
If you change the last of series from
type: 'column',
to
type: 'areaspline',
there will be no gaps on left and right side. Do you need type column?
Solution for your problem is answered here Highcharts Remove Space across the x-Axis by user Dusty. You have to setup for x-axis:
min: 0.5,
max: 10.5,
Note: if you turn your column type series to visible: true half of the first and the last column will be cut-off.
I want to build up a Highchart step-by-step. I got it working, but I'm not happy with the way it gets animated. The animation origin is the y-axis in this case, but I want the bars to rise up from the x-axis.
They do rise up from the x-axis when I have data visible on load. However, I want to start with an empty chart.
http://jsfiddle.net/ueC9g/1/
This is how I initialize highcharts:
new Highcharts.Chart ({
chart: {
type: 'column',
renderTo: 'columnChart'
},
title: {
text: 'Great chart'
},
xAxis: {
categories: ['<5', '5-9', '10-14','15-19','20-24','25-29','30-39','40-49','50-59','60-69','>69'],
min: 0,
max: 10,
title: {
text: 'Age'
},
showEmpty: true
},
yAxis: {
title: {
text: 'Some numbers'
},
min: 0,
max: 20,
showEmpty: true,
alternateGridColor: '#eee'
},
series: [{
name: 'male',
data: [1, 1, 5, 8, 10, 15, 19, 14, 10, 8, 4]
}, {
name: 'female',
data: [2, 1, 3, 4, 5, 6, 8, 4, 4, 3, 2]
}],
plotOptions: {
column: {
events: {
}
}
},
credits: {
enabled: false
}
});
When showing/hiding series, highcharts animates the change to the axis instead of the series itself. I can't find anyway to change this behavior. As a workaround, instead of showing/hiding the series why not add it as new on the click:
var i = 0;
$('#addBar').click(function(){
try {
if (i == 0) {
columnChart.addSeries({name:'male',data:[1, 1, 5, 8, 10, 15, 19, 14, 10, 8, 4]});
}
else if (i == 1) {
columnChart.addSeries({name:'female',data:[2, 1, 3, 4, 5, 6, 8, 4, 4, 3, 2]});
}
i++;
} catch(e){
console.dir(e);
}
});
I'd set up an initial empty series in my config too, so that the axes draw on start:
series: [{visible: false, showInLegend: false}],
See updated fiddle here.
Please familair with this example: http://jsfiddle.net/VcJ4K/5/
$.each(chart.series[0].data, function(i, point) {
window.setInterval(function() {
point.update(point.y2);
}, 500);
});