Here is the chart I'm using.
How do I change the chart to go low to high? Basically just horizontally flip it. The values need to be changed to go from low to high, too.
You can flip it by reversed axis parameter.
xAxis: {
reversed:true,
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
},
}
http://jsfiddle.net/M4hML/6/
Related
I want to increase the chart grid lines to fill the width of the graph.
I have got it till this point: https://jsfiddle.net/mukeshshamra1201/8pu9a5c4/97/
I have used y-axis property to achieve something, but I am not able to figure out the rest.
yAxis: {
min: 0,
title : "",
gridLineDashStyle: 'ShortDash',
labels: {
align :"left",
x:-6,
y:-3
}
}
I want something kike this :
Set spacingLeft and spacingRight to 0:
chart: {
...
spacingLeft: 0,
spacingRight: 0
}
Live demo: https://jsfiddle.net/BlackLabel/3Lpsz0hd/
API Reference: https://api.highcharts.com/highstock/chart.spacing
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
HIGH CHARTS
Please look at JSFIDDLE. Here the bars overlap each other. How to prevent this by resizing the bar width dynamically.
If happens because you set bar width with fixed value. If you want bars to take all available place for width, instead of using pointWidth, set pointPadding to 0, groupPadding to 0 and borderWidth to 0.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.bar.pointPadding
http://api.highcharts.com/highcharts/plotOptions.bar.groupPadding
http://api.highcharts.com/highcharts/plotOptions.bar.borderWidth
Example:
http://jsfiddle.net/yek6g5vy/
If possible remove container inline css height.
Fiddle Demo
Or you can use scrollbar using highstock.js
xAxis: {
categories: ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'sixth', 'seventh'],
allowDecimals: false,
min: 0,
max: 4,
scrollbar: {
enabled: true
},
},
Fiddle demo
I need to align table with highcharts, but chart has irregular padding on the edges, it's based on percentage, I guess.
I would like 30 to stick to the left edge of chart (close to 3) or set it distance manually in pixels. How can I do that in highcharts?
Based on #SebastianBochan suggestions, this is complete solution
xAxis:
startOnTick: true
endOnTick: true
minPadding: 0
maxPadding: 0
Try something like this:
yAxis: {
offset: -15
},
Check this fiddle: http://jsfiddle.net/jcxfhkht/
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/