I'm trying to change the size of a column in a heatmap. I can use the colsize to set the width of the border, but i'd like to change the width of the entire column. Is this possible?
Here's a JS fiddle example.
http://jsfiddle.net/8b9410om/
The Total column I would like to change to the same size at the border that you can see around it
You can use endOnTick and pointPlacement properties:
xAxis: {
...,
max: 1.25,
endOnTick: false
},
series: [...,
{
colsize: 0.25,
pointPlacement: -1.5,
...
}
]
Live demo: http://jsfiddle.net/BlackLabel/t3r12hnk/
API Reference:
https://api.highcharts.com/highcharts/series.heatmap.pointPlacement
https://api.highcharts.com/highcharts/xAxis.max
Related
I have a type area chart, with minor grid lines and a datetime xAxis. data is feed through an array of y values, and I got to render xAxis labels depending on the data length successfully.
My issues are:
the chart has a unwanted padding on the X axis
the markers don't align with their labels
Check it:
Here's a working fiddle: https://jsfiddle.net/fernandaparisi/e07q32ay/53/
I noticed that if I remove all the max, min, tickInterval, pointStart and pointInterval properties the markers are aligned correctly, but the chart doesn't expand its full available width.
margin and spacing chart properties seem to affect the chart as a whole, and not the plotted area.
Any thoughts?
The padding is caused by combined tickInterval and endOnTick: true, to remove it just disable endOnTick.
To position the labels in a different way use align, x and y properties.
xAxis: {
labels: {
align: 'center',
y: 30,
formatter: function() {
return Highcharts.dateFormat('%e %b', this.value);
},
rotation: -45
},
title: undefined,
type: 'datetime',
min: lastSunday - (weekLength * (data.length - 1)),
max: lastSunday,
tickInterval: weekLength,
endOnTick: false,
minorTickInterval: weekLength
}
Live demo: https://jsfiddle.net/BlackLabel/eLbp48d3/
API Reference:
https://api.highcharts.com/highstock/xAxis.labels.align
https://api.highcharts.com/highstock/xAxis.endOnTick
I have applied the plotBand option for the xrange chart where the first row is small than the second on , but when resizing the window the data series are not aligned with the plotBand area.
Currently I'm modifying the y and height of the series by using css, is there any way to make it dynamic to fit into the plotBand area during window resizing.
Jsfiddle: http://jsfiddle.net/karnan796/t1Ldnc69/13/
also the green bar not aligned to the plotBand area
You need to adjust the plotBands to the groupPadding value:
Highcharts.chart('container', {
...,
yAxis: {
plotBands: [{
from: -0.3,
to: 0.3,
color: '#00401f'
}, {
from: 0.7,
to: 1.3,
color: '#2f4776'
}],
...
},
series: [{
pointPadding: 0,
groupPadding: 0.2,
...
}]
});
Live demo: http://jsfiddle.net/BlackLabel/orpvc50t/
API Reference:
https://api.highcharts.com/highcharts/series.xrange.groupPadding
https://api.highcharts.com/highcharts/series.xrange.pointPadding
How to set custom width of each candlestick in Highstock chart?
Hey I set pointWidth = 1 but still has 4 px wide bars, but when I set it to a bigger number, bars do expand
series: [
{
type: 'candlestick',
lineWidth: 0,
pointWidth: 1,
data: [...]
}
]
did you encounter this?
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/