I am using Stock High Charts, I want to display all the labels in x-axis (the labels show city names). How do I achieve this?
xAxis: {
labels: {
rotation: -50,
step: 1
}
},
Increase the value of height. That's the solution I had to apply.
Example code:
chart: {
type: 'bar',
height: 1000
}
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 using the highcharts library.
I have set the xaxis as a datetime axis.
I am in a situation where the ticks on x-axis are overlapping.
http://jsfiddle.net/owge98Lm/
Setting "tickPixelInterval" didn't help:
xAxis: {
type: 'datetime',
labels: { rotation: 45 },
tickPixelInterval: 50
},
Any suggestions ?
I have different high charts as shown below. I have more number of series in one graph and have only one series in other one, In this case in my actual screen graph portion of first graph is bigger than second one, so is it possible to keep graph height constant without considering number of series (legends which occupied height at bottom)?
As was mentioned in the comment, you grab maximum of charts' margin bottom and set it for the rest of the chart. It should be set on load event in the last chart.
function adjustLegend() {
var charts = Highcharts.charts;
var marginBottomMax = charts
.reduce((prevChart, currChart) => Math.max(prevChart.marginBottom, currChart.marginBottom));
charts.forEach(chart => {
if (chart.marginBottom < marginBottomMax) {
chart.update({
chart: {
marginBottom: marginBottomMax
}
});
}
});
}
chart: {
events: {
load: adjustLegend
}
},
example: http://jsfiddle.net/wsrtaq09/1/
If you know what should be the legend height, you can set legend.maxHeight.
legend: {
layout: 'vertical',
maxHeight: 50,
},
example: http://jsfiddle.net/wsrtaq09/2/
I want to draw basic line chart.
When the data type of x-axis is numerical,
I can use the following options to draw this chart when the number of x labels is larger than 1000
plotOptions: {
line: {
turboThreshold: 2000,
},
series: {
turboThreshold: 2000,
}
}
But it seems not work when the data type is categorical and the number of category in x-axis is too large (> 1000 categories)
The link I had tried:
Test on jsfiddle
Is there any solution about this problem?
Many thanks
Check this fiddle: http://jsfiddle.net/am2k9c1t/
Code:
xAxis: {
tickInterval:10,
min:1200,
}
Set tickInterval value in xAxis.
example:
xAxis: {
tickInterval:100
}
Test it here
I am using Highcharts to draw a chart of my data.When I am having a column chart and when I drill down in it, after drill down the chart moves up from the x-axis. This is the x-axis and y-axis settings:
xAxis: {
labels: {
rotation: -20,
align: 'right'
}
},
yAxis: {
min: 0
}
Let me know if anybody has any solution for this.
PLease update the version of the highcharts to 4.0.4, because the previous one had some bugs. It worked for me.