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
Related
I have a chart which has part line and part area stacked. In the first part (area) I want to add an inline legend as it is shown in this example (ie where it says Asia)
https://www.highcharts.com/demo/area-stacked-percent
These are the example options but I do not see how to specify that or if this is the default way to show legends in this plot
In my example, I cannot put the legends inside the area part. Tried to add title in yAxis. I also tried to add an annotation but it did not work:
https://jsfiddle.net/hkpna40r/1/
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
verticalAlign: 'top',
y: 4
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: Date.UTC(2019, 11, 2),
y: 3
},
zIndex:100,
text: 'Arbois'
}],
}],
You can achieve what you want by attaching a module called series-label and set plotOptions.area.label like that:
plotOptions: {
area: {
label: {
enabled: true,
onArea: false
}
},
line: {
label: {
enabled: false
}
}
}
Note, annotations also work but you have to attach annotations module separately.
Demo:
https://jsfiddle.net/BlackLabel/5utLhenb/
API reference:
https://api.highcharts.com/highcharts/plotOptions.area.label
https://www.highcharts.com/docs/advanced-chart-features/annotations-module
When using Highcharts in combination with Highcharts's boost module, the graph is not rendered correclty when using small MS intervals for the xAxis.
Rendering 5000 records, with an interval of 10 ms, it looks like highcharts gets the average for a periode of time (i think)? On hovering the labels shows the correct location of the point line, not the straight line
I some how figured that the graph shows correctly at 4999 record:
Also using 100.000 record, but with a lower interval of 1000ms shows fine:
This problem only shows up when using the boost (which i MUST use because im working with millions of records). Without boost it works fine.
I could not figure out why its behaving like this.
Is this a bug of Highcharts?
Am i missing a porpperty in my chartsettings?
How can i solve this problem?
See jsfiddle for the above example : http://jsfiddle.net/r8Lv41do/49/
My Settings:
Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'x'
},
xAxis: { type: 'datetime' },
boost: {
useGPUTranslations: true
},
navigator: {
enabled: true
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
tooltip: {
valueDecimals: 2
},
series: [{
data: data,
}]
});
Try enabling the boost without the useGPUTranslation set to true.
E.g.:
Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'x'
},
xAxis: { type: 'datetime' },
// Enables boost without any other performance options
boost: { },
navigator: {
enabled: true
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
tooltip: {
valueDecimals: 2
},
series: [{
data: data,
}]
});
Can you please take a look at This Demo and let me know how I can get rid of the Series 1" index!
and have actual index for the two columns or if not possible simply remove it from the chart?
I also didn't get the way that YAxis is adding Ticks to chart! Is there any way to specify the number of Ticks and Max, Min Values?
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Green', 'Pink']
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: 500
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
}]
});
});
You can remove the legend by adding this object to the container (right after series)
legend: {
enabled: false
}
You can set the tick interval on the yAxis like so:
yAxis: {
tickInterval: 25
}
It's all documented here: http://api.highcharts.com/highcharts
I encourage you to read it and experiment with the examples in-line.
It looks like that column grafs don't support legend. If you want remove it just write under initialize
$(function () {
$('#container').highcharts({
....
....
....
});
$('.highcharts-legend').remove();
});
It should work. :)
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 am trying to change the default zoom level on a simple highstock chart. I've been looking around for a solution and came up with this:
rangeSelector: {
selected:0,
},
This did not work with the code below
chart = new Highcharts.StockChart({
chart: {
renderTo: 'dummycontainer'
},
rangeSelector: {
selected:0,
},
credits: {
enabled: false
},
yAxis: {
title: {
text: ''
},
max: 100
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>', //({point.change}%)
valueDecimals: 2
},
series: [{
name: 'MMP',
data: [
],
marker : {
enabled : true,
radius : 3
},
shadow : true
}]
});
What could be causing this?
rangeSelector: {
selected:0
}
very much works
Change default time range | Highchart & Highstock # jsFiddle
Check for any other javascript related errors in your browser's javascript console. If you are trying out on IE or even otherwise I would recommend removing the trailing comman(,) from selected:0, like in the code above or the demo.
Trailing commas lead to invalid json and some browsers may not behave correctly with them. You can validate your json # http://jsonlint.com/ or try the JSLint option in jsFiddle.