I have a chart created with highchart and here is the demo
$(function () {
var seriesData = [["apple",29.9], ["banana",71.5], ["orange",106.4], ["mango",106.4], ["mango",106.4], ["mango",106.4], ["mango",106.4], ["mango",106.4], ["mango",106.4], ["mango",106.4],];
$('#container').highcharts({
chart: {
},
xAxis: {
tickInterval: 1,
labels: {
enabled: true,
color: '#FFFFFF',
formatter: function() { return seriesData[this.value][0];
},
}
},
series: [{
data: seriesData
}]
});
});
and it have many labels placed on x-axis and i can not use rotation option. This is the output i would like to achieve
Set staggerLines: 2 in your xAxis labels, like this:
xAxis: {
labels: {
staggerLines: 2,
...
},
...
},
Working JSFiddle example: http://jsfiddle.net/ewolden/ktgd5h98/
API on staggerlines: https://api.highcharts.com/highcharts/xAxis.labels.staggerLines
Related
I have a chart that shows people, a monetary value and a percentage.
I would like to display the percentage as the datalabel instead of the monetary
value.
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false
}
},
bar: {
dataLabels:
{
allowOverlap:true,
enabled: true,
align: 'right',
overflow:"none",
formatter: function() { return this.y;},
}
}
},
xAxis: {
categories: ["Mary<br/>$ 4,623,450","John<br>$ 1,848,380","Jane<br/>$ 640,170"]
},
series: [{
"data": [
["65%",4623450],
["26%", 1848380],
["9%", 640170]
],
"name": "Session1"
}]
});
});
So:
Mary would have a datalabel of 65% instead of 4623450,
John would have a datalabel of 26% instead of 1848380,
Jane would have a datalabel of 9% instead of 640170
Is there a way to do that?
See jsfiddle here
SOLVED!
As simple as:
formatter: function() { return this.key;},
Full code:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false
}
},
bar: {
dataLabels:
{
allowOverlap:true,
enabled: true,
align: 'right',
overflow:"none",
formatter: function() { return this.y;},
}
}
},
xAxis: {
categories: ["Mary<br/>$ 4,623,450","John<br>$ 1,848,380","Jane<br/>$ 640,170"]
},
series: [{
"data": [
["65%",4623450],
["26%", 1848380],
["9%", 640170]
],
"name": "Session1"
}]
});
});
Updated jsfiddle here
Is there a way to keep the stackLabels on a highcharts stacked column chart, but hide the yAxis?
I have borrowed this fiddle from the HC Author to show the issue. You can toggle the yAxis visibility and this also toggles the stackLabels.
My HighCharts code is:
$(function() {
// Configure the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Highcharts axis visibility'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Peaches']
},
yAxis: {
allowDecimals: false,
title: {
text: 'Fruit'
},
stackLabels: {
enabled: true
},
visible: false
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
data: [1, 3, 2, 4],
name: 'Ola'
}, {
data: [5, 4, 5, 2],
name: 'Kari'
}]
});
var yVis = false,
xVis = true;
$('#toggle-y').click(function() {
yVis = !yVis;
$('#container').highcharts().yAxis[0].update({
visible: yVis
});
});
$('#toggle-x').click(function() {
xVis = !xVis;
$('#container').highcharts().xAxis[0].update({
visible: xVis
});
});
});
Can stackLabels be visible with a hidden yAxis?
You can manipulate on elements in yAxis, instead of set the visibility.
$('#toggle-y').click(function() {
yVis = !yVis;
$('#container').highcharts().yAxis[0].update({
labels: {
enabled: yVis
},
gridLineWidth: yVis ? 1 : 0,
title:{
enabled: yVis
}
});
});
Example:
http://jsfiddle.net/hg1bcva7/
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
}
i create an empty highchart and add a series to the chart.
This is my code:
chart = new Highcharts.Chart({
chart: {
renderTo: 'hccontainer',
zoomType: 'x'
},
title: {
text: 'Telegramme'
},
subtitle: {
text: 'Offline'
},
exporting: {
enabled: false
},
legend: {
enabled: true
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
}
});
And here for example i add a series:
$.ajax({
'url' : 'ajax.php',
'type': 'GET',
'data': {
'action' : 'eibmon_hctel',
'hsid': hsid,
'grp': grp,
'df': datefrom,
'dt': dateto
},
success: function(items) {
chart.addSeries({
name: series_name,
data: items
}, true);
},
cache: false
});
The ajax.php send this result:
{"1441614256000":"1","1441586308000":"0","1441523112000":"1","1441515496000":"0","1441360423000":"1"
,"1441344522000":"1","1441341118000":"0","1441254853000":"1","1441238297000":"0","1441094577000":"1"
,"1441086395000":"0","1441086143000":"1","1441085875000":"0","1441085622000":"1"}
The chart will be redrawn but the line is missing. In the legend the new series get displayed. Is it not possible to start with an empty chart?
Thanks
Looks like your JSON structure is icorrect. You should have a x/y fields and number values.
Example:
{
x:"1441614256000",
y:"1"
}
After loading data, you can convert your json into correct form, parsing data in preprocessing.
How can I have a line graph with categories, but plot the lines in between the categories label? Is there a way to offset the plot to the beginning of the tick width?
Here is an example: http://jsfiddle.net/jMcfG/1/
I want the line to begin on the origin on the x axis, just like it would if the categories wouldn't be there.
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['0', '1', '2', '3', '4']
},
series: [{
data: [0,3,2,5]
}]
});
});
You can stick you chart to the bottom using threshold property. Like this:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
},
plotOptions: {
series: {
threshold: 0
},
},
xAxis: {
categories: ['0', '1', '2', '3', '4'],
},
series: [{
data: [0,3,2,5]
}]
});
});
http://jsfiddle.net/jMcfG/5/
For x-axis this is not possible with use of an API. You will need to do some custom programming. It's a feture that centers graph if categories are present.
I did find an alternative solution which is to add an imaginary point which mirrors the first plot and then set the x axis min to 1 to cut it out, so the graph will cross the origin and will only be visible on the positive side.
http://jsfiddle.net/jMcfG/7/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
min: 1,
categories: ['-13', '0', '1', '2', '3', '4']
},
yAxis: {
min: 0,
minPadding: 1
},
series: [{
data: [-1,1,3,2,5]
}]
});
});