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.
Related
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 using high charts to show energy data but i think due to some negative value high caharts starting a new line from each new point and lines not have any connection between them.
here is the picture of my results.
problem Image
you can see in the image there should be only one line.
here's my data for this.
I have 4 series's to show in graph but here i am only providing one because each line have same issue
var data={'vt':[[1588273200000, 0],[1586372400000, 245],[1586286000000, 200],[1586199600000, 7],[1586113200000, 4],[1586026800000, 1],[1585940400000, 4],[1588186800000, 40],[1585854000000, 7],[1588100400000, 30],[1588014000000, 155],[1587927600000, 38],[1587841200000, 57],[1587754800000, 35],[1587668400000, 66],[1587582000000, 68],[1587495600000, 35],[1587409200000, 40],[1587322800000, 62],[1585767600000, 8],[1587236400000, 37],[1587150000000, 44],[1587063600000, 72],[1586977200000, 13],[1586890800000, 5],[1586804400000, 58],[1586718000000, 90],[1586631600000, 41],[1586545200000, 186],[1586458800000, -498]]};
and here's how i initialize the highcharts object.
$('#'+id).highcharts({
title: {
text: titletext
},
time: {
timezone: 'Asia/Karachi'
},
chart: {
zoomType: 'x',
title: 'Meter 1'
},
xAxis: {
labels: {
formatter:function(){
return Highcharts.dateFormat("%b %e", this.value);
}
},
title: {
text: 'Date'
},
showLastLabel: true,
tickmarkPlacement: 'on',
tickPosition: 'inside',
tickWidth: 0,
tickPixelInterval: 60,
lineWidth: 2,
lineColor: 'rgba(255,205,255,0.6)',
minPadding: 0,
gridLineWidth: 0,
offset: 20,
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
endOnTick: true,
},
yAxis: {
gridLineColor: 'black',
gridLineWidth: 0,
title: {
enabled: true,
text: cap
},
labels: {
enabled: true
}
},
tooltip: {
backgroundColor: 'white',
borderColor: 'black',
shadow: true,
style: {
color: 'black',
fontSize: '12px',
padding: '8px'
},
enabled: true,
crosshairs: false,
shared: false,
snap: 30,
},
plotOptions: {
flags: {
shape: 'squarepin'
}
},
series: [
{
name: 'Total kwh',
data: data.vt
},
{
name: 'Day kwh',
data: data.dt
},
{
name: 'Peak kwh',
data: data.pt
},
{
name: 'Off Peak kwh',
data: data.opt
}
],
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
navigation: {
enabled: true
},
adjustChartSize: true,
},
exporting: {
filename: titletext+'_'+"<?php echo $_SESSION['username']; ?>"+'_'+todayDate(),
buttons: {
contextButton: {
menuItems: ["viewFullscreen",
"separator",
"downloadJPEG",
"separator",
"downloadXLS",
]
}
}
},
credits: {
enabled: false
}
}
)
You need to provide an external graph value for z-index which will identify its position
Please go through this fiddle link with ur dataset. I have improved ur code.
So you can review it.
https://jsfiddle.net/vishalanand77/f6dnua28/32
You have unsorted data - Highcharts error #15: https://www.highcharts.com/errors/15/
You can sort it in this way:
data.vt.sort(function(a, b) {
return a[0] - b[0];
});
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4993/
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.
I am having troubles trying to render Highchart inside a div. I dont know why there are bars that not displaying correctly.
I set a width value on the container highchart div, expecting bars occupy 100% of the div, but as you see it is not happening.
Here is how i set Highchart options:
var chart = new Highcharts.Chart({
chart: {
type: 'bar',
spacingBottom: 1,
spacingTop: 1,
spacingRight: 1,
backgroundColor: null,
renderTo: containerId
},
colors: ['#8b878a', '#10914E', '#DBD311', '#7e8b00'],
title: '',
tooltip: {
enabled: false
},
xAxis: {
labels:{
enabled: false
}
},
yAxis: {
labels:{
enabled: false
},
gridLineWidth:0,
title: {
enabled: false
},
visibility: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function() {
if(this.series.options.showPercentageValue && this.series.options.percentageValue > minValueBarPercentage){
return (Math.round(this.series.options.percentageValue) + ' %'); //~~(elimina decimales)
}
},
style:{fontSize: '9px', color:'black', paddingBottom: '1px', fontWeight: 'bold'}
},
pointPadding: 0,
groupPadding: 0.1
}
},
series: values
});
Any idea?
Here is a picture of what is happening >>> http://imgur.com/a/FEfpz
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/