I am using Highcharts v6.0.7.
Objective:
I need to center align column bars “on” x-axis tickmarks.
Configuration:
Highcharts column chart
X-axis is datetime and non-categorized.
I am using pointPlacement with a numeric value in order to center align the column bars of my chart over x-axis tickmarks.
Issue:
Yesterday, a certain numeric value for pointPlacement centered the column bars “on” tickmarks. However, today, all configuration remaining same, the column bars are at an offset from the x-axis tickmarks.
Questions:
Is this a bug with Highcharts or should I need more configuration along with pointPlacement to center the column bars. I referred to this documentation -- https://api.highcharts.com/highcharts/series.column.pointPlacement
For non-categorized x-axes, is there an alternative property to center the column bars on axis tickmarks?
I see that in my chart, pointPlacement values of “on” and “between” do not work as expected. Also a value of 0 does not center the column bar “on” the axis tickmarks (the documentation states it should)
Code
this.chart = new Chart({
chart: {
type: 'column',
},
title: {
text: this.title
},
xAxis: {
type: this.xType,
startOnTick: true,
min: moment(this.pointStart).add(1, 'days').unix() * 1000,
tickInterval: this.xTickInterval,
labels : {
align: 'center'
}
},
yAxis: {
...
},
tooltip : {
...
},
credits: {
...
},
plotOptions: {
column: {
pointPlacement: 0.4
},
series: {
pointStart: this.pointStart ? moment(this.pointStart).unix() * 1000 : 0,
pointInterval: this.pointInterval,
showInLegend: false
}
},
series: [{
data: [], //show empty grid initially
}]
});
Related
I am developing a layered column chart using ComboChart on Angular google charts. Although I've separated two series of bar charts in two different axis, being able to find a bar in front of the other, like needed, I can't change the width of one of the series only. I want a result like the amCharts Layered Column Chart:
Layered Column Chart example
Right now, the chart looks like:
Current chart - Angular google charts
Also, if there is a way to share the same y axis while keeping one bar in front of the other, instead of staking then, it would be great.
The code I've been using for options of the angular google chart:
this.options =
{
colors: ['#1E90FF', '#f39800'],
hAxis: {
title: 'haxisTitle',
type: 'category'
},
vAxis:{
title: 'Value',
minValue: 0,
format: this.numberFormat
},
seriesType: 'bars',
bar: {1: {groupWidth: "30"}},
series:
{
0: {
targetAxisIndex: 0
},
1: {
targetAxisIndex: 1,
}
},
vAxes: {
0: {
title: 'Altered Value',
label:'Altered Value',
viewWindow: { // <-- set view window
min: 0,
max: this.maxValue + 0.1*this.maxValue, // Sets the maximun value of altered or real value to the window size (both axis)
},
format: this.numberFormat,
type: 'bars'
},
1: {
title: 'Real Value',
label:'Real Value',
viewWindow: { // <-- set view window
min: 0,
max: this.maxValue + 0.1*this.maxValue,
},
format: this.numberFormat,
type: 'bars'
}
},
aggregationTarget: 'auto',
stackSeries: true,
isStacked : true,
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
keepInBounds: true,
maxZoomIn: 4.0
}
};
}
The chart shows the data correctly, the only problem is the layout.
Some reference that might help:
Google Developers - Visualization: Combo Chart
amCharts Layered Column chart
Overlapped bars - Stack overflow quote - Here the result was a stacked bar chart (something I don't want)
I want to disable or hide marked x-axis on the following image:
But I still need to be able to show a plot line.
I tried to play around with "xAxis" Highcharts property and I am able to hide marked x-axis, but then I can not add a plot line. It seems to me this axis is somehow connected with the plot.
Thanks a lot for help.
The plotLines are connected to an axis, but you can separately disable the grid and the labels:
xAxis: [{
...,
grid: {
enabled: false
},
plotLines: [{
color: 'red',
value: today + day * 7,
width: 5
}],
labels: {
enabled: false
},
tickLength: 0
}, {
visible: false
}]
Live demo: https://jsfiddle.net/BlackLabel/c2xLruvp/
API Reference: https://api.highcharts.com/gantt/xAxis.visible
I am displaying a area spline dynamic data graph where the dynamic values are fetching from a particular API. The problem is, when the dynamic data are displaying, the graph series goes below the y-axis or above the graph's customized design.
From my side, I found that the problem is with y-axis spacing. So, my question is: could I use a common spacing at y-axis? And the series must display above a particular pixels (height) from x-axis. At the same time, I can use the options min, max, tickinterval because of changing the data from external source.
Here is my y-axis,
yAxis: {
title: {
text: '',
},
opposite: true,
offset: 0,
crosshair: {
color: '#335A81',
label: {
enabled: true,
format: '{value:.5f}'
}
},
gridLineWidth: 0.1,
labels: {
enabled: true,
align: 'right',
x: 10,
format: '{value: .5f}'
},
opposite: true,
minorGridLineWidth: 0,
}
I'm trying to create a chart using highcharts that includes both a column series and a scatter series with a custom point marker. The series will contain slightly different sets of data, but will overlap for the most part and will always have the same x-axis values.
I've set it up, but the problem is that it's not lining up perfectly. Some of the scatter series' points are shifted one or two pixels to the left of the corresponding bar.
Any ideas about how to fix this?
{
chart: {
animation: false
},
xAxis: {
tickInterval: 1
},
series: [{
type: "column",
borderWidth: 0,
pointWidth: 20,
name: "col"
},
{
type: "scatter",
states: { hover: { enabled: false } },
marker: { symbol: 'url(symbol.png)' }
}]
}
And here's a screenshot of what's happening:
Indeed it looks like a bug, also with standard markers, so I've decided to report it to our developers https://github.com/highslide-software/highcharts.com/issues/1843
I'm trying the Highcharts tools to display some graph with huge amount of data and series comparison.
the king of graph I need is exactly the one given in this example.
Except that mine has to be displayed in vertical ( with the time line on y axis, from the top to the bottom, and value on the x axis)
like the 'spline inverted' example ( seen here ) show, it's quite useful to display altitude related data for example.
I can easily imagine to invert values and exchange axis legends, but I don't think the time line navigator will follow...
I also tried to set the graph as inverted like in the 'Spline with inverted axes' example :
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
inverted: true
},
...
but it didn't work.
Is there a way to display the exact same graph in vertical with the time line navigator on the y axis ?
EDIT : its seems its not possible to use invert on HighStock graphs (as seen in doc),
So I adjust my question :
Can we use an HighCharts inverted graph to display as many points that in HighStock charts ? (even if we won't get any scroll navigator on the y-axis)
Highstock doesn't support inverted charts, see: http://api.highcharts.com/highstock#chart
EDIT:
It is possible to use inverted Highcharts with dataGrouping, it of course requires Highstock in files, but just create chart using Highcharts.Chart(). Don't forget to enable dataGrouping from Highstock. See example: http://jsfiddle.net/PATyv/2/
Code:
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
inverted: true
},
title: {
text: 'USD to EUR exchange rate'
},
tooltip: {
style: {
width: '200px'
},
valueDecimals: 4
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'USD to EUR',
data: data,
id: 'dataseries',
dataGrouping: {
enabled: true
}
}]
});