I use string for x axis categories. and I want remove the margins of the first category and last category label to make them align to left/ right. is that possible?
Set pointPlacement property to 'on':
series: [{
...,
pointPlacement: 'on'
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4796/
API Reference: https://api.highcharts.com/highcharts/series.line.pointPlacement
Related
I need to show multiple axis, which is having constant values in the x-axis and dynamic values in y-axises
1st y-axis regarding bubble chart enter image description here
2nd y-axis regarding column chart
We got requriment like to show them side by side not like merged as shown in second refrenece picture.
enter image description here
Implemented bubble and column chart in one chart using 2 y-axis and 1 x-axis. We got chart as show in reference.
enter image description here
Both are getting mergged instead we want to show them side by side.
You need to create column and bubble series with, each with own y-axis. Use pointPlacement property to position columns next to bubbles.
series: [{
type: 'column',
pointPadding: 0.4,
pointPlacement: 0.3,
data: [70, 50, 65],
yAxis: 1
}, {
type: 'bubble',
data: [3, 2, 3]
}]
Live demo: http://jsfiddle.net/BlackLabel/pwq3shef/
API Reference:
https://api.highcharts.com/highcharts/series.column.pointPlacement
https://api.highcharts.com/highcharts/series.column.pointPadding
We have to create a chart and tried but it is not showing the column in case of negative value in the data.
for link :
'https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-placement'
I have put a negative value and it is not showing a column for it, how we can achieve it for column-placement chart.
You just need to remove min restriction for y-axis.
yAxis: [{
// min: 0,
...
}]
Live demo: https://jsfiddle.net/BlackLabel/xq8ejgnf/
API Reference: https://api.highcharts.com/highcharts/yAxis.min
If you look at the JSFiddle below, you'll see that when it renders the chart, the upper-most values are not displayed on the chart (10,000/10,000/80,0000/20,0000).
I can't seem to figure out why it doesn't display those top values.
I also noticed that it doesn't display the -20,000 value for the Weight channel.
https://jsfiddle.net/BBousman/h4gs7erk/
-
You need to enable showLastLabel option:
yAxis: [{
...,
showLastLabel: true
}, ...]
Live demo: https://jsfiddle.net/BlackLabel/142uc9Ls/
API Reference: https://api.highcharts.com/highstock/yAxis.showLastLabel
I have a Highcharts chart as follows:-
http://jsfiddle.net/sushengloong/KQNhm/1/
I need to change it such that the bar chart appears right in between the ticks. As you can see from the above link, I tried using pointPlacement: 'between' but some charts are still not displayed in between the two adjacent ticks. On top of that, there are some spacing to the right of every bar chart which make the gap between the bar charts unequal.
In addition, the xAxis tick label should also appear in the middle whereby the two adjacent ticks depict the start and end of the respective month. I can't find an option for this.
In the one xAxis, you cannot have "between" / "o"n option for different series. Only what you can try to do is using two xAxis.
xAxis:[{
//...options
pointPlacement: 'between'
},{
linkedTo:0
pointPlacement: 'on'
}]
I am trying to increase the space between charts in this link however i have used minPadding/maxPadding in xAxis and pointWidth: 90/pointPadding: 0 but nothing works. It seems to me that there is forced spacing at the top and bottom of the chart area which is causing this.
http://jsfiddle.net/j7NMC/2/
/*What i have tried */
series:{
pointWidth: 90,
pointPadding: 0
}
xAxis: {minPadding:0, maxPadding:0,}
Any ideas?
Thank you :)
I would suggest changing your data setup. Instead of 3 different series, use 1 series and 3 categories:
series: [{
data: [973,133,107]
}]
example: http://jsfiddle.net/j7NMC/4/
What this does for you:
1) eliminates that wasted space on the chart
2) eliminates need for legend by putting the labels right on the axis next to the bar (drastically improves usability of chart, makes comprehension much easier for user)
3) eliminates need for multiple colors for the bars (drastically improves usability of chart, makes comprehension much easier for user)
EDIT:{
you can try setting the groupPadding to 0 to remove some of the space, as the the 3 series you have displayed are grouped, and extra space is being added because of that.
The options need to be in the 'bar' section of plotOptions, and you don't need a series entry in plotOptions i.e. like this:
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
pointWidth: 10,
pointPadding: 0
}
},
http://jsfiddle.net/A8dpf/