I get a problem with highchart, I want my graph to take the entire space according, but there is alway a space between the datas and the top of my div.
Here if my fiddle : http://jsfiddle.net/w2bz5/35/
Here is my javascript code :
jQuery(function () {
jQuery('#container').highcharts({
chart: {
type: 'column',
backgroundColor: '#3d3d3d',
margin: [0, 0, 0, 0],
width: 100,
height: 100,
},
title: {
text: null,
margin: 0,
floating: true,
verticalAlign: 'bottom',
x: 0,
y: 0
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false
}
}
},
yAxis: {
title: {
text: null,
margin: 0
},
labels: {
enabled: false
},
gridLineWidth: 0,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0
},
tooltip: {
enabled: false
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false
},
gridLineWidth: 0,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
data: [1298],
color: '#00FF00',
borderColor: null
}, {
data:[4302],
color: '#FF0000',
borderColor: null
}]
});
});
Thanks in advance !
Snite
You'll want to set stacking to percent, rather than normal.
plotOptions: {
column: {
stacking: 'percent',
dataLabels: {
enabled: false
}
}
},
Documentation: High Charts Documentation
Normal stacking assumes there will be various values for each column, which would mean you would have different sizes of columns--that's why it leaves the space at the top. Setting it to percent would mean every column would be the same height regardless of the values it contains.
On a side note, the export button is going to be in the way of the graph if you intend on keeping them this small. You can remove it by adding this to your list of options.
exporting: {
enabled: false
}
Fiddle Link
You can also set maxPadding nad spacingTop as 0, then set max value.
http://jsfiddle.net/sbochan/w2bz5/37/
Related
I'm using highcharts do draw some markers, and I really need not to show the line between them. I know that I can accomplish that by dividing the series, but I would like to ask to the community if there is another way.
I have already tried lineWidth = 0, but it keeps drawing a thin line between points.
Line width
Line marker
To better exemplify, I built the following jsFiddle:
https://jsfiddle.net/L0gkwfxs/
Highcharts.chart('container', {
chart: {
backgroundColor: 'transparent'
},
credits: false,
navigation: {
buttonOptions: {
theme: {
fill: 'white',
padding: 5,
stroke: 'none'
}
}
},
title: {
text: null
},
subtitle: {
},
xAxis: [{
visible: true,
offset: 0.1,
},
{
visible: false
}],
plotOptions: {
series: {
pointWidth: -5
}
},
yAxis: [{
visible: true,
reversed: true,
gridLineWidth: 0,
title: {
text: 'MD (m)',
style: {
fontSize: '10px'
}
},
min: 2000,
max: 6500
},
{
opposite: true,
gridLineWidth: 0,
title: {
text: null,
}
}
],
legend: {
enabled: false
},
series: [
{
animation: {
duration: 5000
},
lineWidth: 0,
name: 'Sensor',
color: 'RGBA(255,0,47,0.6)',
data: [
[
2000.5,
5601,
5603
],
[
2000.5,
6815,
6817
]
],
dataLabels: {
enabled: false
},
marker: {
enabled: true,
radius: 6,
symbol: "triangle-down"
},
enableMouseTracking: true
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
Can anyone help me?
Thanks in advance!
This behaviour occurs due to lineWidthPlus option which as default adds one-pixel to the hovered line width.
plotOptions: {
series: {
states: {
hover: {
lineWidthPlus: 0
}
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/jonL1ymg/
API Reference:
https://api.highcharts.com/highcharts/series.line.states.hover
Another solution, which I recommend, is just using scatter series which shows only markers by default.
Demo:
https://jsfiddle.net/BlackLabel/k6Lsu2a0/
API Reference:
https://api.highcharts.com/highcharts/series.scatter
Hi I try to create spider chart using high chart but it taking first 4 values(parm1,parm2,parm3,parm4) properly but not the other 4 values (data1,data2,data3,data4)
i am using this code to call these values finalResults.innerHTML += spiderChart (PM,AF,AT,AD,dataPM,dataAF,dataAT,dataAD) + "<br>" values of PM,AF,AT and AD are showing properly in spider chat but for data dataPM,dataAF,dataAT,dataAD it is showing nothing ... i check the function by replacing variable with acctual value and it was working properly... please let me know what is wrong here ?
function spiderChart(parm1,parm2,parm3,parm4,data1,data2,data3,data4) {
$('#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: [parm1,parm2,parm3,parm4],
tickmarkPlacement: 'on',
lineWidth: 0,
labels: {
align: 'center',
distance: 43
}
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
endOnTick: true,
showLastLabel: true,
tickPositions: [10, 20, 30, 40, 50, 60, 70 , 80]
},
credits: {
enabled: false
},
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: 'Maturity',
data: [data1,data2,data3,data4],
pointPlacement: 'on',
color: 'green',
fillOpacity: 0.2
}]
});
};
Highcharts.chart('container', {
chart: {
type: 'arearange',
zoomType: 'x',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
//type: 'datetime',
accessibility: {
rangeDescription: 'Range: Jan 1st 2017 to Dec 31 2017.'
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled:true
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
//stacking: 'normal',
borderColor: '#303030',
color : '#cac9c9',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#303030'
}
},
dataLabels: {
useHTML: true,
enabled: true,
inside: true,
align:'left',
allowDecimals: true,
formatter: function(){
return "SOME_TEXT_INSIDE_HTML_TAG";
}
},
},
series: [{
data: [
[0, 10],
[0, 10],
],
borderColor: 'black',
borderWidth: 0.2,
},
{
data: [
[20, 40],
[20, 40],
]
}]
});
Above is the code for an Area range chart. Couple of questions.
I just want to show some random text on top of each area. I tried with dataLabels but I doesn't seem to work. Isn't it possible to do so?
Yaxis seems to be shown in AreaRange chart when mouse is hovered over the chart. Can it be set to be displayed by default?
Any help would be much appreciated. Thanks in advance.
I tried to reproduce your code and here is an output: https://jsfiddle.net/BlackLabel/uqmyjsr9/
The dataLabels config needs to be nested in the series object.
plotOptions: {
series: {
//stacking: 'normal',
borderColor: '#303030',
color: '#cac9c9',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#303030'
},
dataLabels: {
useHTML: true,
enabled: true,
inside: true,
align: 'left',
allowDecimals: true,
formatter: function() {
return "SOME_TEXT_INSIDE_HTML_TAG";
}
},
},
},
I am not sure here - the yAxis is displayed all the time, not only after hovering over the chart.
I am trying to make the chart with both text label on xAxis and yAxis like this
Example
I am able to make it by this configuration
$(function() {
var chart = Highcharts.chart('chart-container', {
chart: {
type: 'bar',
},
title: {
text: '',
floating: true
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y:.2f}</b><br/>'
},
xAxis: {
gridLineColor: '#7F7F7F',
lineColor: '#7F7F7F',
gridLineWidth: 1,
tickLength: 0,
labels: {
align: 'left',
reserveSpace: true
},
categories: ['1. - 4. trinn (frivillige øvelser)', '1. - 4. trinn (obligatorisk ferdighetsprøve)', '5. - 7. trinn (frivillige øvelser)', '8. - 10. trinn (frivillige øvelser)']
},
yAxis: {
min: 31.83333,
max: 100,
title: {
text: null
},
gridLineWidth: 1,
tickLength: 0,
gridLineColor: '#7F7F7F',
lineColor: '#7F7F7F',
categories: {
'33.33333': 'Må øve mer',
'66.66667': 'På god vei',
'100': 'Kan'
},
tickPositions: [0, 33.33333, 66.66667, 100],
plotBands: [{
from: 31.83333,
to: 33.33333,
color: '#CC3333'
}, {
from: 65.16667,
to: 66.66667,
color: '#F2BA38'
}, {
from: 33.33333,
to: 34.83333,
color: '#CC3333'
}, {
from: 66.66667,
to: 68.16667,
color: '#F2BA38'
}, {
from: 97,
to: 100,
color: '#77B800'
}]
},
plotOptions: {
series: {
pointPadding: 0,
borderWidth: 0
}
},
series: [{
name: '',
color: '#646464',
borderColor: '#464646',
borderWidth: 1,
data: [0, 66.6666666666667, 0, 0]
}]
})
});
https://jsfiddle.net/ngoclamnn/nu2fwzrn/
But you can see that it has a little bit "weird" at the 0 values, maybe it is a bug on Highchart?
Do you have another way to solve this?
Using this answer I was able to find a solution. Create yAxis categories as a variable and use the same function the answer uses to insert them, that is:
var categories = {0: '', 33.33333: 'Må øve mer', 66.66667: 'På god vei', 100: 'Kan'}
And then in the chart:
yAxis: {
labels: {
enabled: true,
formatter: function() {
return categories[this.value];
}
},
tickInterval: 1,
minPadding: 0,
maxPadding: 0,
startOnTick: true,
endOnTick: true,
...
}
Working example: https://jsfiddle.net/nu2fwzrn/73/
Make sure to upvote the original answer.
My question is about a column chart i making..
I don't understand why my label are not set on the height..
I try many things but i really don't know..
Here you can find a example :jsfiddle project
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
height: 200
},
title: {
text: 'Monthly Average Rainfall'
},
xAxis: {
offset: 0,
labels: {
useHTML: true,
rotation: 0
},
tickmarkPlacement: 'on',
gridLineWidth: 0,
lineWidth: 0,
tickPosition: 'outside'
},
yAxis: {
gridLineWidth: 0,
plotLines: [{
color: '#DDDDDD',
width: 1,
value: 0
}],
max: 0.92,
labels: {
enabled: false
},
title: {
text: ''
}
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'black',
verticalAlign: 'top',
useHTML: true,
y: -20
}
},
},
series: [{
showInLegend: false,
negativeColor: '#F14646',
color: '#00B76C',
pointWidth: 40,
data: [0.01, 0.03, 0.03, 0.05, 0.03, 0.10, 0.11, 0.11, 0.15, 0.92]
}]
})
});
});
Thank you!!
It seems that plotOptions.column.stacking = 'normal' and plotOptions.column.y: -20 are causing most of the trouble. So, firstly you should set plotOptions.column.y: 0 (or remove it). Secondly, you could do one of the following
remove plotOptions.column.stacking entirely if you do not actually need it
some column labels may still be shown inside the bar instead of above, this is because there is not enough space above the column - one option is to set yAxis.max to a large enough value to guarantee space
if you do need stacking, use yAxis.stackLabels.enabled: true instead (and remove plotOptions.column.dataLabels if they interfere)
See the relevant Highcharts yAxis.stackLabels option documentation and their stacked column chart example.