How can i hide the horizontal line as well as the vertical range lines in navigator as shown in the image?
Set gridLineWidth to 0:
navigator: {
xAxis: {
gridLineWidth: 0
}
}
Live demo: http://jsfiddle.net/BlackLabel/jth4vy9c/
API Reference: https://api.highcharts.com/highstock/navigator.xAxis.gridLineWidth
Related
On bar and column charts, how do you control the series overlap in highcharts? What is the properties name?
In powerpoint this is how I would control the gap between the inside of the bars:
You need to use pointPadding property. Also groupPadding can also be useful for you.
plotOptions: {
series: {
pointPadding: 0.2
}
}
Live demo: http://jsfiddle.net/BlackLabel/782qwgnr/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.column.pointPadding
https://api.highcharts.com/highcharts/plotOptions.column.groupPadding
i have tried with following demo.
Demo : https://jsfiddle.net/50tdn8hz/enter code here
You can decrease xAxis.min value:
xAxis: {
min: -1,
...
}
Live demo: https://jsfiddle.net/BlackLabel/atryv6k5/
API Reference: https://api.highcharts.com/highcharts/xAxis.min
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 have manipulated highcharts heatmap graph to suit some of my requirement. But I am not able to hide the tick lines on secondary y axis. Below is the jsfiddle link of what I have done. http://jsfiddle.net/sandeepkparashar/39xBU/389/389
Please suggest how to hide the tick lines.
Actually, those lines are grid lines and an axis line (the one in the bottom). You can disable them by setting their width to 0.
xAxis: {
lineWidth: 0
...
},
yAxis: {
gridLineWidth: 0,
...
}
example: http://jsfiddle.net/sebdom/39xBU/390/
Is there any way to completely hide scrollbar's buttons which contain arrow?
In addition to this, is there any way I can set the position of scrollbar such as setting y value so that the scrollbar hovers on the chart?
Setting its color to transparent doesn't help.
scrollbar: {
buttonBackgroundColor: 'transparent',
buttonBorderWidth: 0,
buttonArrowColor: 'transparent',
buttonBorderRadius: 0
}
EDIT:
Even if I hide the elements, I cannot use the space left as the picture below.
You can manipulate SVG elements.
chart: {
events: {
load: function () {
var chart = this;
chart.scroller.scrollbarButtons[0].hide();
chart.scroller.scrollbarButtons[1].hide();
}
}
},
Example:
http://jsfiddle.net/fexw25Lz/