I have some issues with my stacked highcharts graph:
$('#container').highcharts(
chart:
type: 'column'
credits:
enabled: false
title:
text: ''
xAxis:
lineColor: '#afafaf'
lineWidth: 1
tickWidth: 0
labels:
enabled: false
opposite: true
yAxis:
min: 0
max: 4
gridLineWidth: 0
lineWidth: 0
labels:
enabled: false
title:
text: ''
reversed: true
legend:
enabled: false
tooltip:
enabled: false
plotOptions:
column:
borderWidth: 1
borderColor: '#FFFFFF'
pointPadding: 0
groupPadding: 0
animation: false
stacking: 'normal'
dataLabels:
enabled: false
series: [
color: '#FF0000' # red
data: [1,2,3]
,
color: '#0000FF' # blue
data: [0,2,1]
]
)
The graph is fiddled here (I've chosen a small container size to show pixel differences).
blue graph has no upper border (this can be fixed by inserting a third series with all zeroes)
middle column of the blue graph overlaps with the right column, if container width has (3n+1)px (n being any integer)
the red part of the middle column is 1px smaller in height than the blue part, if container height has an even number of pixels
My workarounds are pretty ugly, especially for (2) because the problematic container widths depend of the number of columns, which may vary in my application.
Any ideas? Are these bugs in highcharts.js or have I done something wrong in my highcharts configuration?
The border overlaps with the grid line or axis line, which is intended
This is issue https://github.com/highslide-software/highcharts.com/issues/2694. We'll look into it.
This is a consequence of rounding to the nearest full pixel in order to render sharp graphics.
Related
This is the JSFiddle for demonstration.
In the two bars shown in the above JSFiddle, the respective top and the bottom side of the two bars are not black, but grey, since that is the color of the chart border/border of plot area. Would it be possible to make the two bars to be "on top" of the chart border (so that all their sides are black)? I have tried with zIndex in "series". But that does not work.
These are the most relevant javascript code:
Highcharts.chart('container', {
chart: {
type: 'column',
borderWidth: 1,
plotBorderWidth: 1,
marginBottom: 100
},
plotOptions: {
series: {
borderColor: 'black',
animation: false
},
},
xAxis: {
categories: ['1', '2']
},
yAxis: {
tickInterval: 10,
min: -50,
max: 50
},
series: [{
data: [50, -50],
zIndex: 300
}]
});
To achieve this effect, you can set series.column.clip: false.
Disabling this option allows series rendering over plotArea borders.
series: [{
clip: false,
data: [50, -50]
}]
Live demo:
https://jsfiddle.net/BlackLabel/2kyc4dbu/
API reference:
https://api.highcharts.com/highcharts/series.column.clip
I have a Highcharts area chart with no labels that I'd like to take up the entire size of its container (i.e. with the chart itself up to the very edge). I have already disabled the labels on each axis and set reserveSpace to false and padding to 0, yet my chart still does not expand to the very edges (see below screenshot):
I have this in my chart config:
...,
xAxis: {
...,
title: {
enabled: false,
reserveSpace: false
},
labels: {
enabled: false,
reserveSpace: false,
padding: 0
},
tickLength: 0,
lineWidth: 0,
tickWidth: 0,
...
},
yAxis: {
...,
gridLineWidth: 0,
minorGridLineWidth: 0,
title: {
enabled: false,
reserveSpace: false
},
labels: {
enabled: false,
reserveSpace: false,
padding: 0
},
tickLength: 0,
minPadding: 0,
maxPadding: 0,
...
},
...
How can I accomplish extending the lines out to the very edge of its container?
chart.spacing is the option you are looking for.
spacing: Array.Since 3.0.6
The distance between the outer edge of the chart and the content, like title or legend, or axis title and labels if present. The numbers in the array designate top, right, bottom and left respectively. Use the options spacingTop, spacingRight, spacingBottom and spacingLeft options for shorthand setting of one option.
Defaults to [10, 10, 15, 10].
Here I am getting gradient color at top of the chart area by reversing y-Axis. check the image below .
yAxis: {
reversed: true,
showFirstLabel: false,
showLastLabel: true
}
I don't want to reverse the y-Axis, if i am reversing the y-Axis my chart also reversed. I want the gradient color which is in top of the chart line without using this Reversed Y-axis. Suggest me to if any other options in highcharts.
Could any one help me to solve this.
I am working live random data. In this case only the area traveled by the data should get the gradient color , empty space other than the data in chat shouldn't get gradient color.
As per #DaMaxContent answer , the output will act like below image.
I don't want that gradient which filled in other area of the chart data. Could you please help me to resolve this.
The break down:
You can use gridZindex and backgroundColor/fillColor properties to
produce the desired effect. Only issue is that the grid has to be
displayed over graph. Here is the solution: DEMO
Here is the code behind it:
chart: {
type: 'area',
backgroundColor: { //<<--that is what you are using as fill color
linearGradient : {
x1: 0,
y1: 1,
x2: 0,
y2: 0
},
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
yAxis: {
reversed: false,
showFirstLabel: false,
showLastLabel: true,
gridZIndex: 1000 //<<--grid Z index is used to display grid lines over the graph instead of under it
},
series: [{
name: 'AAPL Stock Price',
data: data,
threshold: null,
fillColor : "#fff", //<<--fill color under the line to simulate effect
zIndex: 1000,
tooltip: {
valueDecimals: 2
}
}]
If you wish to get rid of the marginal color areas, you can get rid off the graphs margin with chart: { [... ,] margin: 0 [, ...] } and then use the container's padding as the graph margin.
more info:
highcharts styling guides:
http://www.highcharts.com/docs/chart-design-and-style/design-and-style
grid Z index:
http://www.java2s.com/Tutorials/highcharts/Example/Axis/Set_grid_line_z_index.htm
background color:
Changing HighCharts background color?
(alternative to bg color) plot background color (bg color of main plot only)
http://api.highcharts.com/highcharts#chart.plotBackgroundColor
Is it possible to remove the empty space between the bars within a Highcharts polar chart, so that it looks like a pie chart? I just want to fill up the whole 360 degrees of the chart without spaces between the "spikes".
Example: JSFiddle
Are there any options for the plot or series parameter?
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPlacement: 'on'
}
}
You just have to add the pointPadding option :
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPadding: 0
}
}
http://jsfiddle.net/7pddwx6a/
I want to trim in extra edges from the xAxis .
I am using end on tick and start on tick to achieve that but somehow it seems that highcharts is ignoring that.
Here is the (fiddle)
Options Set
xAxis: [{
gridLineWidth: 2,
lineColor: '#000',
tickColor: '#000',
gridLineDashStyle:'ShortDash',
categories:xAxisCategories,
gridLineColor:'#000',
tickmarkPlacement:'on',
endOnTick: true,
startOnTick: true,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
title: {
text: null
}
}],
labels: {
enabled: false
},
title: {
text: null
}
}],
I think you mean startOnTick. Anyway, that works exactly as should - note, you are using categories, that means plotting area is divided for categories equally (docs). One tick = one category = one part of plotting area (for example width = 20px).
You have two options:
don't use categorized axis (quite a lot of questions on SO are mentioning this - search for start/endOnTick or min/maxPadding with categories)
set start/endOnTick to false, min to (-0.5), max to (categories.length-0.5) and should work (-0.5 etc. may be different a little).