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?
Related
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
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
I have two highcharts on one page one of the charts can add and remove a second or thrid yAxis dynamicly. When this is done of course the width of the xAxis is shorter than the one with only one yAxis.
Now i want to sync the width of the xAxis to keep both charts underneath each other.
When I try the set xAxis width the width is changed but the chartarea is sticking to the left and not to the right.
How can I get draw both chart-areas with the same dimensions?
Here is a fiddle with a small example: Fiddle Fiddle
Best
MrLight
You can use top, width and offset properties to size and position axes. First two of these are not documented but they work.
Live demo: http://jsfiddle.net/BlackLabel/cvey8ap8/
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim'],
width: '90%',
left: '8%',
// Categories for the charts
},
yAxis: [{
min: 0, // Lowest value to show on the yAxis
title: {
text: 'Apple Consumption' // Title for the yAxis
},
left: '7%',
offset: 0
},
{
min: 0, // Lowest value to show on the yAxis
title: {
text: 'Apple12 Consumption' // Title for the yAxis
},
offset: 0
}
],
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
Do anyone know which setting in hightcharts can change the width that marked with red arrow as example?
Please take a look at the image below
I want to set the width of the red arrow as example
You are using categories, so axis is divided evenly between all existing categories. In other words, you can simply remove unnecessary categories, for example: http://jsfiddle.net/mwqto4n6/
$('#container').highcharts({
xAxis: {
categories: ["2016", "2025"]
},
series: [{
type: 'column',
data: [200, 120]
}]
});