I just found this strange behavior, I don´t know if it's a misused property or if it's some kind of bug.
If I zoom for a 6 months periods it seems to work, but if I scroll to the beginning of the series the last value of the column series is hidden. Here is a working example.
Highcharts.chart('container', {
rangeSelector: {
enabled: true,
},
scrollbar: {
enabled: true
},
chart: {
zoomType: 'x'
},
title: {
text: 'Zoom broken on 6m'
},
xAxis: {
type: 'datetime'
},
yAxis: [{},{}],
series: timeSeriesParser.map(set=> ({
...set,
})),
});
The issue occurs because the column needs additional space to be rendered. Another problem is that notice that for some particular data 6months means something different - for example in the case which you described the 6 months range starts on March 1, 2011, but ends on the Aug 31, 2011 - meanwhile the next column point starts on the Sep 1, 2011.
I have two ideas on how to solve this issue:
Set the pointPlacement to 'on':
Demo: https://jsfiddle.net/BlackLabel/Lze67jf3/
plotOptions: {
column: {
pointPlacement: 'on',
}
},
API: https://api.highcharts.com/highstock/series.column.pointPlacement
Or set the getExtremesFromAll to true:
Demo: https://jsfiddle.net/BlackLabel/78wte2hs/
API: https://api.highcharts.com/highstock/series.column.getExtremesFromAll
Related
I want to create a linechart with HighCharts that has a plotband along every point of the line. Like so: https://imgur.com/a/WVj7uJb
(They are using HighCharts as well, so it must be possible).
However, I can't seem to manage getting it for every point specific. Whenever I add plotbands, it just draws a band using the highest and lowest point like so: https://imgur.com/a/PZdKIBz
How I currently render the chart (note the plotbands part):
Highcharts.chart('chart', {
chart: {
type: 'line',
},
title: {
text: `${this.variable}`,
},
credits: {
enabled: false,
},
xAxis: {
type: 'category',
title: {
text: "Date"
},
},
yAxis: {
title: {
text: this.unit
},
plotBands: [
{
color: "orange",
from: 12,
to: 14
},
{
color: "orange",
from: 10,
to: 13
} // and so on.
]
},
tooltip: {
headerFormat: `<div>Date: {point.key}</div>`,
pointFormat: `<div>${this.unit}: {point.y}</div>`,
useHTML: true,
},
series: seriesList,
} as any);
So exact example would render a plotband from 10 to 14 along the whole linechart, instead of to different points: one from 12 to 14, and one from 10 to 13.
Any ideas as to how I can accomplish this? I have seen something with 'path', but I can't find anything about it.
Thanks in advance.
In that case, you should use arearange series instead of plotBand.
Demo:
https://www.highcharts.com/demo/arearange-line
API Reference:
https://api.highcharts.com/highcharts/series.arearange
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 have a graph that monitors the traffic of people visiting a website and it currently shows all of it's data no problem:
Every month or so I update and send out a newsletter to people that are subscribed to me and I want to know if there is a way to show on that graph the time that those newsletters came out.
So if I was looking at the past week of site-traffic in my graph and my newsletter was sent out on Monday, a line would appear on that day on the graph:
I know I can sort of do this with markings, a way to add lines to a graph in flot that already exists
{ xaxis: { from: 1, to: 2 }, color: "#000000" } //Creates a vertical line from 1 to 2
But that doesn't seem to work the same when you have time mode enabled. E.g. The parameters I'm giving it for markings won't show up when time mode is on
So my question is: How do I add a marking to the graph that appears on a specific date with flot?
EDIT
$.plot("#chart_filled_blue", data1, $.extend(true, {}, Plugins.getFlotDefaults(), {
xaxis: {
min: start,
max: end,
mode: "time",
tickSize: [1, type],
tickLength: 0
},
series: {
lines: {
fill: true,
lineWidth: 1.5
},
points: {
show: true,
radius:4,
lineWidth: 1.1
},
grow: { active: true, growings:[ { stepMode: "maximum" } ] }
},
grid: {
hoverable: true,
clickable: true,
markings: [{
xaxis: {
from: 1530421200,
to: 1530507600
},
color: "#000000"
}]
},
tooltip: true,
tooltipOpts: {
content: '%s: %y'
}
}));
Markings work just fine in flot with time axes. Can you post some code to help understand the issue better?
You'll have to set the marking from and to to the timestamp you want the marking to appear:
grid: {
markings: [{
xaxis: {
from: 1336201200000,
to: 1336201200000
},
color: "#ff0000"
}]
}
This JSFiddle has a working example of a time series axis and markings.
I want to create a column chart with no spaces and no overlapping between the columns based on a datetime x-axis.
Highcharts.chart('container', {
chart: { type: 'column' },
title: {
text: 'Month columns'
},
xAxis: {
type: 'datetime',
},
legend: {
enabled: false
},
plotOptions: {
column: {
groupPadding: 0,
pointPadding: 0,
borderWidth: 0,
grouping: false
}
},
series: [{
pointIntervalUnit: 'month',
pointPadding: 0,
groupPadding: 0,
name: 'Test',
negativeColor: 'rgb(223,83,83)',
data: [{x: Date.UTC(2016,11), y:-1000},{x:Date.UTC(2017,0), y:-500}, {x:Date.UTC(2017,1), y: 500}, {x:Date.UTC(2017,2), y: 300}],
}]
});
The following fiddle shows the problem:
Spaces between columns.
The goal is that there are no spaces in between the columns and they don't overlap. I assume that the space is caused by the changing duration of a month e.g. 30 days, 31 days, 28 days, ... but i thought this is handled by the pointIntervalUnit: month option?
Any ideas on alternative series arrangements with the expected result are highly appreciated.
Many thanks for any help on this.
The problem here is caused by the default pointRange value: https://api.highcharts.com/highcharts/plotOptions.column.pointRange
In this case it equals to 28 days - length of the shortest month - February 2017 (28 days).
There's no possibility in Highcharts to manipulate a single point using pointRange or pointWidth (these options apply only to a series).
The easiest solution for this is simply to change the type of the x axis to 'linear' (default) and use categories.
Live demo: https://jsfiddle.net/kkulig/ua4a14vu/
The easy solution is to set: pointPadding: -0.6, i series: JSFiddel
Background
I have a HighCharts JS chart being updated every minute, but with the chart initially populated using the load event in the chart config.
My problem is that when I call addPoint on the series, the chart shifts all of it's data and leaves the chart with only the one new data point in the middle of the chart.
chart.series[0].addPoint(["Thu, 22 Sep 2016 13:21:58 GMT", 98], true, true)
chart.series[1].addPoint(["Thu, 22 Sep 2016 13:21:58 GMT", 64], true, true)
Here is what my chart looks like on loading the page...
Now here is what it looks like after addPoint...
EDIT - Chart configuration added
{
chart: {
type: 'line',
zoomType: 'x',
events: {
load: requestInitialData
}
},
credits: {
enabled: false
},
title: {
text: undefined
},
plotOptions: {
series: {
marker: {
enabled: false,
radius: 2
},
lineWidth: 2
}
},
series: [],
xAxis: {
labels: {
enabled: true
}
},
yAxis: {
min: 30,
max: 150,
startOnTick: false,
endOnTick: false
}
}
EDIT - Added JSFiddle Problem Click button once to add initial data and then subsequent clicks to see the problem
EDIT - Problem Solved It appears a bug was introduced into a recent version of HighCharts, since 4.2.2, which does work for me. 4.2.7 doesn't
Problem Solved...it was a bug in HighCharts 4.2.7 and possibly previous versions. Works in 4.2.2 though