Using this example from Highcharts for displaying grouped column chart with negative values
https://www.highcharts.com/demo/column-negative
When we have less attributes in x-axis, the distance between both bars of the same value becomes wider. Can we reduce this distance by using any option & make the two bars look close to each other for each month. Attaching output with question.
Sample chart
Options I am using are:
plotOptions: {
column: {
dataLabels: {
enabled: false
},
pointWidth: 15
},
series: {
centerInCategory: true
}
},
Using the groupPadding and pointWidth property you can adjust the space between the grouped columns.
plotOptions: {
column: {
dataLabels: {
enabled: false
},
groupPadding:0.35,
pointWidth: 25
}
},
API:
https://api.highcharts.com/highcharts/series.column.groupPadding
https://api.highcharts.com/highcharts/series.column.pointWidth
Live demo:
https://jsfiddle.net/BlackLabel/kfwz7gce/
Related
I am trying to generate heat map for the large set of series data with same x and y-axis categories and scrollbars enabled for both x & y-axis. Problem is y-axis is showing up some additional labels with an empty plot area which did not get solved by setting endOnTicket to false
Here is the graph with sample data, Please help!
http://jsfiddle.net/graji/mdu37kq8/9/
yAxis: {
startOnTick: false,
endOnTick: false,
categories: ['abc', 'abc2', 'abc3', 'abc4', 'abc5', 'abc6', 'abc7', 'abc8', 'abc9', 'abc10', 'abc11', 'abc12', 'abc13', 'abc14', 'abc15', 'abc16', 'abc17', 'abc18', 'abc19', 'abc20', 'abc21', 'abc22', 'abc23', 'abc24', 'abc25', 'abc26', 'abc27', 'abc28', 'abc29', 'abc30', 'abc31', 'abc32', 'abc33', 'abc34', 'abc35', 'abc36', 'abc37', 'abc38', 'abc39'],
title: null,
min: 0,
max: 10,
scrollbar: {
enabled: true
}
}
You have more than 1000 points which causes the third value to be treated as Y value. You need to disable turboThreshold property:
plotOptions: {
series: {
turboThreshold: 0
}
},
Live demo: http://jsfiddle.net/BlackLabel/f2kqgson/
API Reference: https://api.highcharts.com/highcharts/series.heatmap.turboThreshold
I use Highcharts to visualize 3D charts in my project. Particularly I am interested in showing a 3D scatter plot like this. Below the chart you can see the options as well as the respective jsFiddle.
Is there a possibility to display a label with every point's name always i.e. that hovering is not required?
Thanks!
Within the series you can enable the datalabels like this:
series: [{
dataLabels: {
enabled: true,
},
}]
http://jsfiddle.net/oghokm8w/1/
then you could use the formatter to customise the text to be displayed:
series: [{
dataLabels: {
enabled: true,
formatter: function () {
return this.point.x;
},
}
}]
i have a chart used grouped categories highcharts, i have succesfull make a charts but i got a bit problem.
example charts:Fiddle here
it is possible to remove space / or change space between column which have same parent, so it will be near each other ?
in that example :
apple, banana, orange = group as fruit
carrot, potato, tomato = group as vegetable
cod, salmon, tuna = group as fish
i wanted :
between apple, banana, orange the column is near
and between orange - carrot is still have space.
i have tried to change on style but i still can't figure it out.
thanks
You can use these options under plotOptions inside and verticalAlign to show lables at the bottom.
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: true,
verticalAlign: 'bottom',
formatter: function() {
return this.point.name;
}
},
}
},
I had to change the structure of the series to make it easy to display:
series: [{name:'Fruits',
data: [{y:4, name:'Apple'}, {y:14, name:'Banana'},{y:18, name:'Orange'}]
}, {name:'Vegetable',
data: [{y:5, name:'Carrot'}, {y:6, name:'Potato'}, {y:5, name:'Tomato'}]
}, {name:'Fish',
data: [{y:14, name:'Cod'}, {y:15, name:'Salmon'} ,{y:18, name:'Tuna'}]
}]
});
example jsfiddle
i have figure it out too with diffrent style [jsfiddle][1]
[1]: http://jsfiddle.net/rikad/gptrz8Lh/
I have a couple of formatting questions, as you'll see I'm running a very small chart 225*150...
How do I remove the x-axis labels? I still want the information in the tooltip, just not along the axis. I've tried...
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
...but it still shows "0, .5, 1, 1.5 etc..."
I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?
Last one, how do I set zero for the y-axis scale?
Here's a fiddle!
Thanks!
UPDATE: Added suggestions to original fiddle.
In this block:
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
You have
1) the categories property listed inside the title attribute, and
2) you have enabled: false set for the title attribute
categories is a property of the axis directly, and the enabled: false should be applied to the labels, not the title.
"I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?"
Primarily the marker radius property:
http://api.highcharts.com/highcharts#plotOptions.series.marker.radius
You can also look at the lineWidth property of the marker.
"Last one, how do I set zero for the y-axis scale?"
axis min property:
http://api.highcharts.com/highcharts#yAxis.min
updated fiddle: http://jsfiddle.net/jlbriggs/z6ZLt/8/
To disable the xAxis.labels you set enabled to false:
xAxis: {
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled: false,
labels: {
enabled: false
}
}
For doing "set zero for the y-axis scale" you set the yAxis.min value to 0:
yAxis: {
min: 0,
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}
To handle the size of the line + markers you need to modify their properties in :
plotOptions: {
series: {
marker: {
radius: 1.5
},
pointWidth: 1
}
}
Is it possible to invert the y-axis, but not the data? I have a ranking which should start with 1 at the top, not at the bottom, but the columns should stay just normal.
Thanks for any hints!
You can use reversed yAxis, and column series, where each point will have y and low values, where low values are the same as the lowest number. See: http://jsfiddle.net/JVNjs/303/
var max = 10;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Chart Title'
},
credits: {
enabled: false
},
yAxis: {
min: 0,
max: max,
tickInterval: 2,
reversed: true
},
series: [{
type: 'column',
data: [{
y: 1,
low: max
}, {
y: 3,
low: max
}, {
y: 6,
low: max
}]
}]
There is no good easy direct way to do it (afaik).
There are a variety of approaches you could take, however.
This example uses a reversed axis and stacked columns:
http://jsfiddle.net/jlbriggs/JVNjs/301/
stacking:'normal',
It relies on adding a second series that is the difference between your value and the max, which means you must also specify a y axis max.
I left the second series a light grey so you can see them, but you can set their opacity to 0 so that they are invisible.
Other options might include doing some calculations on the y axis label formatter to display the axis labels as you want without having to touch the data.
Highcharts provides an option for this called reversed setting it true will do the work for you.
http://api.highcharts.com/highcharts#yAxis.reversed
reversed: true
here is the jsfiddle
http://jsfiddle.net/bmbhD/