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.
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
My current x-axis looks like in following image:
My current x-axis
I need to adjust first and last tick to the lowest and biggest value.
So lets say first tick would be 26.4.2015 18:38:36 and last tick would be 27.4.2015 9:07:27. Rest of ticks should be calculated automatically.
$('#container').highcharts({
chart: {
zoomType: "x"
},
xAxis: {
type: "datetime",
title: {
text: "Time"
},
minPadding: 0,
maxPadding: 0,
min: 1430073516000,
tickmarkPlacement: "on",
showFirstLabel: true,
showLastLabel: true,
startOnTick: false,
endOnTick: false,
labels: {
formatter() {
if (this.isFirst || this.isLast) {
return Highcharts.dateFormat("%e.%m.%Y %H:%M:%S", this.value);
} else {
return this.axis.defaultLabelFormatter.call(this);
}
}
}
},
yAxis: {
title: {
text: "Value"
}
},
tooltip: {
shared: true
},
series: [
{
id: "First",
name: "First",
marker: {
enabled: false
},
data: [0, 0, 0, 0, 0, 0, 242, 542, 456, 422, 445, 884, 123],
pointStart: 1430073516000,
pointInterval: 60000
},
{
id: "Second",
name: "Second",
marker: {
enabled: false
},
data: [0, 0, 0, 25, 356, 427, 242, 456, 811, 422, 541, 5, 0],
pointStart: 1430073516000,
pointInterval: 60000
}
]
});
JSFiddle: http://jsfiddle.net/vy5uL2aw/1/
Solution was following function added to xAxis object.
tickPositioner() {
let tickPositions = this.tickPositions;
tickPositions[0] = this.dataMin;
tickPositions[tickPositions.length - 1] = this.dataMax;
return tickPositions;
}
Question is related to this one.
Problem : Currently I have chart with 2 series - one serie with positive and one with negative values. By default each serie has dynamic scaling but they are not relating (I mean if 20 for first serie is MAX value and 5 for second serie is MAX, then it looks on graph like the same). When I set max and min values to yAxis, it solve problem, but adds to much empty space, that for some cases column is too small. Can I update chart setting to have dynamic scalling but one for both series?
Here is my example with setted MAX and MIN values for yAxis http://jsfiddle.net/futw5e8k/6/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: null
},
xAxis: {
categories: ['13-17', '18-24', '25-34', '35-44', '45-54', '55-64', '65+'],
offset: -150,
lineWidth: 0,
tickWidth: 0
},
yAxis: [{
title: {
text: null,
},
top: 50,
height: 124,
min: 0,
max: 100,
gridLineColor: 'transparent',
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
}
},{
title: {
text: null
},
top: 200,
height: 150,
offset: 0,
min: -100,
max: 0,
gridLineColor: 'transparent',
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
}
}],
plotOptions: {
column: {
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
formatter: function() {
return Math.abs(this.y);
}
}
}
},
tooltip: {
formatter: function() {
return this.x + '<br/>' + this.series.name + ': ' + Math.abs(this.y);
}
},
series: [{
name: 'John',
data: [1, 13, 20, 19, 15, 7, 2]
}, {
name: 'Joe',
yAxis: 1,
data: [-0.35, -6, -9, -16, -3, -1.5, -0.25]
}]
});
On load event you can find the maximum of your data and dynamically update axes' max - see Axis.update().
chart: {
type: 'column',
events: {
load: function() {
const max = Math.max(this.series[0].dataMax, this.series[1].dataMax);
this.yAxis[0].update({
max: max,
}, false);
this.yAxis[1].update({
max: max,
top: 130
}, false);
this.redraw(false);
}
}
},
example: http://jsfiddle.net/futw5e8k/7/
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 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?