Can someone point me in the right direction? I'd like to build a bar chart using highcharts with values both above and below the X axis - http://nvd3.org/examples/discreteBar.html
Something like this - but the axis here is on the Y axis, I'd like that on the X axis. http://www.highcharts.com/demo/bar-negative-stack
Thanks in advance!
To move to vertical bars, you need to change the chart type:
chart: {
type: 'column'
},
http://jsfiddle.net/s29xbgLc/
Related
I have a categorical polar chart with 5 axes, and each axis has its own min/max range. I would like to configure both the axis labels and to add ticks to each individual axis.
The axis labels are drawn on the axis line itself, but I'd prefer them to be drawn slightly away from the line
There are no ticks on each axis, and I would like short ticks drawn on each axis line.
I've tried tinkering without success with the gridLine* and tick* y axis properties. Nothing seems to visually change when I do this, so I am guessing I'm barking up the wrong tree. Can I get tickmarks and better label positioning?
Here's a fiddle for this: https://jsfiddle.net/cfarmerga/cgrk96yh/
Use chart.parallelAxes.labels option to set x and y axis labels positions.
Example code:
chart: {
polar: true,
parallelCoordinates: true,
parallelAxes: {
gridLineWidth: 0,
labels: {
y: 25,
}
},
}
API Reference:
https://api.highcharts.com/highcharts/chart.parallelAxes.labels
There is no possibility to set ticks for the polar chart from the API options. You will need to draw them using Highcharts.SVGRenderer. Check the similar thread at Highcharts forum: https://www.highcharts.com/forum/viewtopic.php?f=9&t=45661
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
I can see that Highcharts.js provides 'stacked percentage column' charts but I cant seem to find 'stacked percentage bar' charts. Am I missing something?
stacked percentage column = https://www.highcharts.com/demo/column-stacked-percent
stacked percentage bar = ?
As specified under the Bar chart information page a bar chart is:
The bar chart is exactly the same as a column chart only the x-axis and y-axis are switched.
With that in mind, we can turn any column chart into a bar chart by switching the axis. This can be done using the inverted option (API).
For example (JSFiddle demo):
chart: {
type: 'column',
inverted: true
}
Using HighChart, I wanted to create grouped column chart with max width, so that when there are less points on x axis the bar does not look wide.
I found some property maxPointWidth which can be applied to achieve the same. but using this there is a gap for each bar within x-point.
How to remove this gap ? I have tried pointPadding:0 as well seems this does not help
I am expecting chart something like below.
Fiddle: https://jsfiddle.net/mcshiva0507/hx83bbzb/2/
groupPadding will help. https://api.highcharts.com/highcharts/plotOptions.column.groupPadding
plotOptions: {
series: {
groupPadding:0.45,
maxPointWidth: 10
}
},
https://jsfiddle.net/mcshiva0507/hx83bbzb/2/
I am generating Highcharts column charts with many columns. The chart is very wide, necessitating scrolling (via the CSS overflow option on the Highcharts div). Is there a way for the Y axis to always be visible, even when one has scrolled to the right? I am aware that Highstock has an option for a scrollbar, but I'm only using Highcharts. Is there anything comparable there?
Thanks in advance.
You can enable scrollbar in highcharts including highstock.js. but using highcharts. see example: http://jsfiddle.net/xVyLr/
xAxis: {
max:5
},
scrollbar: {
enabled:true
},
Is it possible to align the y axis tick "outside" on a highstock graph, so that it aligns with the gridline, rather than being "inside" and sat on top of the gridline. The documentation for highstock suggests that it should be placed "outside" by default, but looking at every example of a highstock graph, they always appear to be "inside".
tickPosition: String. The position of the major tick marks relative to the axis line. Can be one of inside and outside. Defaults to "outside".
Highchart example (what I want): http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/
Highstock example (what I get): http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/basic-line/
Many thanks in advance.
Update - a solution of sorts
I came to the realisation that a Highcharts.StockChart is just a pre-configured version of Highcharts.Chart in the highstock.js file.
HighCharts.Chart has all the features of a Highcharts.StockChart - not just the features of a Highcharts.Chart in the highcharts.js file.
As a result, I have just used a highstock.js Highcharts.Chart with the configuration I require, and this places the yAxis labels in the correct position.
You can use offset parameter for yAxis.
http://api.highcharts.com/highstock#yAxis.offset
EDIT:
http://jsfiddle.net/Z4zwr/1/
yAxis : {
labels:{
align:'right',
x:-10
},
lineWidth : 1,
offset : 30
},
I've found a solution (jsfiddle): Add labels: { align: 'left' } to your yAxis options, like so:
yAxis: [{
labels: {
align: 'left'
}
}]
This tells Highcharts to align the left end of the labels with the y-axis.
Updated jsfiddle: http://jsfiddle.net/r4wrf63u/