I have a area chart build with highcharts, I am trying to reduce some spaces between y axis cell columns means reduce height from 0 to 1 , 1 to 2 etc, but not getting proper result. how to achieve it ?
jQuery(document).ready(function () {
var txt = document.getElementById('hdnYaxis');
var txtFoxXAxis = document.getElementById('hdnXaxis');
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Monthly Status'
},
xAxis: {
categories: $.parseJSON(txtFoxXAxis.value),
labels: {
style: {
color: 'red'
}
},
maxPadding: 0,
},
tooltip: {
pointFormat: '{series.name} <b>{point.y:,.0f}'
},
plotOptions: {
area: {
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: $.parseJSON(txt.value)
});
});
set tickPixelInterval in yAxis ,use this:
yAxis: {
tickPixelInterval: 10 // whatever you want
}
Set maxPadding on yAxis as 0.
yAxis:{
maxPadding:0
}
Related
I am trying to set the start of drawing column data from a minimum value, but cannot figure out how to do this. That is, that the axis starts with a value of -43, and not with 0 (see screenshots).
what i have
I want to get something like this:
what i want
chart: {
renderTo: 'container',
backgroundColor: 'transparent'
},
tooltip: {
formatter() {
return `${moment(this.x).format('MMM DD')}: ${this.y.toFixed(2)}`;
}
},
plotOptions: {
column: {
pointStart: -50,
dataLabels: {
enabled: true,
format: '{point.y:.2f}'
}
}
},
title: {
text: ''
},
yAxis: {
plotLines: [{
zIndex: 1,
color: '#5c5c5c',
value: 0,
width: 3,
}],
title: {
text: ''
}
},
xAxis: {
gridLineWidth : 1,
labels: {
formatter() {
return moment(this.value).format('MMM DD');
}
}
},
legend: {
enabled: false
},
series: [{
data: [...this.monthData.resultByDays.map(res => [res.date, res.result])],
type: 'column'
}]
I think that a good approach will be to use the columnrange series rather than basic column. In the columnrange it is possible to set the range where the point could start from.
Demo: https://jsfiddle.net/BlackLabel/ur6qgnbz/
And the code to hide the '-60' data label:
dataLabels: {
enabled: true,
formatter() {
if(this.y === -60) {
return false
} else {
return this.y
}
}
}
API: https://api.highcharts.com/highcharts/plotOptions.columnrange
I have a highcharts chart representing some kind of a bar control. It is defined the following way:
chart = new Highcharts.Chart({
credits: {enabled: false},
chart: {
renderTo: container,
type: 'column'
},
legend: { enabled : false },
title: {
text: title
},
xAxis: {
title: {
enabled: false,
},
min: -500,
max: 500
},
yAxis: {
enabled: false,
title: {
enabled: false
},
labels: {
enabled: false
},
gridLineWidth: 0
},
tooltip: {
formatter: function() {
return this.x + ' MW';
},
style: {
fontSize: '8px',
padding: '0px'
},
hideDelay: 200
},
plotOptions: {
scatter: {
marker: {
radius: 4,
lineWidth: 0,
fillColor: color,
}
}
},
series: [{
name: '--',
type: 'scatter',
data: points,
color: graphColor_9
}]
});
and looks approximatively like this:
When a cursor hovers over a marker it becomes bigger, see the one on the picture, actually there is a cursor over it. But if I continue moving a cursor inside a marker it returns to the original size after some timeout. I would like a marker to stay big all the time while a cursor is inside. Is it possible?
I could not find the color value for each Axis in highcharts api documentation.
in other words I mean changing color of numbers at left/down side of each axis.
currently the configuration for Axis is like this:
xAxis: {
lineColor: '#d8efe3',
labels: {
formatter: function() {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
lineColor: '#d8efe3',
gridLineColor: '#d8efe3',
title: {
text: null
},
labels: {
formatter: function() {
return this.value / 1000 +'k';
}
}
},
edit:
there is nothing special about the chart, anyway assume the chart is as simple as this one:
http://jsfiddle.net/highcharts/llexl/
I believe you are referring to the labels. Just change the style for the yAxis label.
DEMO
xAxis: {
lineColor: '#d8efe3',
labels: {
formatter: function() {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
labels: {
style: {
color: 'orange'
},
formatter: function() {
return this.value / 1000 +'k';
}
},
lineColor: '#d8efe3',
gridLineColor: '#d8efe3',
title: {
text: null
}
},
Hope this helps and let me know if you have any questions!
This should change x and y axis label colors to red. I believe this is what you are looking for.
xAxis: {
lineColor: '#d8efe3',
labels: {
style: {
color: 'red'
},
formatter: function() {
return this.value; // clean, unformatted number for year
}
}
}
},
yAxis: {
lineColor: '#d8efe3',
gridLineColor: '#d8efe3',
title: {
text: null
},
labels: {
style: {
color: 'red'
},
formatter: function() {
return this.value / 1000 +'k';
}
}
},
example
Docs
Please see below code for chart.
It is not displaying colors properly as defined in the js.
When I run this js in jsfiddle, it does show me correct colors.
jQuery(document).ready(function () {
var my_chart = {
chart: {
renderTo: 'divTotalOpenPositionsGraph',
type: 'column',
marginLeft: 13, marginBottom: 30,marginTop:5,
fontFamily: 'Arial,Helvetica,sans-serif',
},
credits: {
enabled: false
},
title: {
text: 'Open Position'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
colorByPoint: true,
borderWidth: 0,
animation: {
duration: 5000
},
dataLabels:{
enabled:true,
formatter:function(){
if(this.y > 0)
return this.y;
}
}
}
},
series: [{
name: 'Positions',
data: [6,9]
}],
colors: [
'#f89422',
'#8cc641'
],
xAxis: {
categories: ['Internship','Employment'],
labels: {
enabled: true
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
}
},
};
new Highcharts.Chart(my_chart);
});
Can anyone please correct me on this? I need orange color in first column and green in second column.
Thank you in advanced.
I came across some syntax errors, but as a result I reproduced your example here:
http://jsfiddle.net/WVgDM/
Colors are as you described.
http://jsfiddle.net/gabrielesandoval/efHq7/
Is there a way to fill in the gap between the y-axis and the first point. The first point on my chart should be "25 years" and i would like the area between 0 and 25 to be filled in as well. Even if the tooltip doesn't work for that point, I would just like to visually show that the values between 0 and the first point.
I tried adding a point with a x value of zero but that didnt work. The only area charts I have seen where there is no gap between the two axis and the area are examples where the chart is inverted. Is there a proper way to do this?
Current Code:
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Monthly Comparison'
},
subtitle: {
text: '1 vs 2'
},
xAxis: {
min: 0,
categories: [0, '25 years', '30 years', '35 years', '40 years', '45 years']
},
yAxis: {
labels: {
formatter: function() {
return '$' + this.value;
}
},
min: 0,
title: {
text: 'Cost'
}
},
tooltip: {
shared: true,
valuePrefix: '$'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
area: {
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
type: 'area',
name: 'series1',
data: [['',60],['25 years',60], ['30 years',60], ['35 years',60], ['40 years',60], ['45 years',60]]
}, {
type: 'area',
name: 'series2',
data: [['',90], ['25 years',100], ['30 years',175], ['35 years',300], ['40 years',400], ['45 years',400]]
}]
});
});
You should set minPadding/maxPadding as 0, but these parameters doesn't work with categories. So you need to use numeric xAxis, instead of categories.