I need to plot the Highcharts column chart from top to bottom. Any advice?
I make use of reversed property in Y-Axis to plot the chart from top to bottom.
yAxis: {
reversed: true,
}
Related
I'm using some different charts renderer in Highcharts drilldown. In some cases, my first level is a column chart and the second (or third...) level is a pie.
Everything is working well except some specified settings for the axes (title, color/width) that appear in the pie chart. The expected behavior is entire axis are hidden in case of pie chart.
As example, in the following : https://jsfiddle.net/vegaelce/w3crqofu/ I would like the axis lines and titles to be hidden in the pie drilled charts.
When using a pie in the first level by setting the type as for the second level :
type: 'pie',
the axes are correctly hidden.
You can use the drilldown and drillup callbacks to customize your chart options, like:
events: {
drilldown() {
const chart = this;
chart.title.hide()
chart.axes.forEach(axis => axis.update({visible: false}, false, false))
chart.reflow()
},
drillup() {
const chart = this;
chart.title.show()
chart.axes.forEach(axis => axis.update({visible: true}, false, false))
chart.reflow()
}
}
Demo: https://jsfiddle.net/BlackLabel/3ac9hrfj/
API: https://api.highcharts.com/highcharts/yAxis.visible
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/
I have a problem with Highcharts, when trying to position the x-Axis tick marks according to the column data shown. I want to align the x-axis ticks on the right, but all the time they are displayed on the center. X-axis must be numbers, so I don't have categories.
Fiddle here
Experiment with the pointPlacement option.
For instance:
plotOptions: {
column: {
pointPlacement: -0.5
}
}
Produces (fiddle here):
How to set scrollbar position to Left in highcharts/highstock ?
As shown in image when the chart loads,
The scrollbar is automatically aligned to right.
Is there a way to position it to Left ?
We can do this thing using setting min to 0
xAxis: {
min: 0, //setting min to 0
max: 5
},
here is Jsfiddle link .
You can use setExtremes http://api.highcharts.com/highstock#Axis.setExtremes() and define range for scrollbar.
I have a (horizontal) bar chart and I want to add dataLabel's at the base (or left most part) of the bar for the series.
similar to this: http://flowingdata.com/2009/05/22/poll-results-what-data-related-area-are-you-most-interested-in/
Is there a way using the formatter function to set this value?
plotOptions: {
bar: {
dataLabels: {
formatter: function() {
this.series.options.dataLabels.x = ?????????????
return this.y;
},
The task of the formatter function is to format the label text. It gives you a way to modify the internal state of the chart, but that's really just a hack and as such may or may not work.
One way to place the labels at the base is to use stack-labels instead of data-labels (the data-labels will be placed at the top of the bar either aligned left or right). To configure stack labels at the base, do:
yAxis: { // The y axis is horizontal 'bar' layout
stackLabels: {
style: {
color: 'white' // Make the labels white
},
enabled: true, // Enable stack labels
verticalAlign: 'middle', // Position them vertically in the middle
align: 'left' // Align them to the left edge of the bar
}
}
You will also need to set stacking to 'normal':
Example on jsfiddle:
Update: Labels for stack-totals will show the sum of all series for a specific category (stack) so only in the case of having one single series in the chart will stack-labels and data-labels show the same value.