http://jsfiddle.net/leongaban/627yamt2/
Docs: http://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines
Trying to get plotbands to show up, however no luck so far, what am I missing?
This is the only code I added to the forked jsfiddle above:
xAxis: {
dateTimeLabelFormats: {hour: '%I %p', minute: '%I:%M %p'},
plotBands: [{
color: 'red',
from: 1,
to: 2,
value: 3, // Value of where the line will appear
width: 2, // Width of the line
label: {
text: 'I am a label', // Content of the label.
align: 'left' // Positioning of the label.
}
}]
},
Trying to get something that looks like this:
I think that you need to use parameters connected with plotBands. Right now some of your parameters are connected with plotLines as well and I think this is causing your issue. Here you can find parameters for plotBands:
http://api.highcharts.com/highcharts#xAxis.plotBands
plotBands: [{
color: 'red',
from: 1265888000000,
to: 1345888000000,
label: {
text: 'I am a label', // Content of the label.
align: 'left' // Positioning of the label.
}
}]
And here you can find live example how your chart can look with plotBands:
http://jsfiddle.net/627yamt2/1/
You can also add plotBands using xAxis.addPlotBand method:
http://api.highcharts.com/highcharts#Axis.addPlotBand
Best regards.
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 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
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 have a chart made with highcharts.js.
The graph works the way I wanted but then if I try to set the categories (programmatically or not) somehitng strange happen, the tick become smaller and move to the centre leaving a big space on the sides of the graph.
BEFORE:
AFTER:
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'graph',
type: 'area',
},
xAxis: {
title: {
text: ''
},
startOnTick: false,
endOnTick: false,
tickmarkPlacement: 'on',
},
series: [{
data: [['aa',29.9], ['bb',71.5], ['cc',106.4],['dd', 129.2 ]]
}],
});
// the button handler
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.xAxis[0].setCategories(['bb', 'bb', 'cc', 'dd']);
});
});
See this JsFiddle:
http://jsfiddle.net/MaurizioPiccini/d746v/3/
It all happens when you press the button (the categories can be set in the xAxis as well giving the same problem).
Is it possible to have named categories to start and end at the graph extremes?
You can use workaround which, updatse your axis with defined min/max value.
chart.xAxis[0].update({
categories: ['bb', 'bb', 'cc', 'dd'],
min: 0.5,
max: 2.5
});
http://jsfiddle.net/d746v/6/
I found a solution that is also reporteed here:
http://forum.highcharts.com/highcharts-usage/highchart-ticks-start-point-change-when-categories-names-are-t29052/
The solution is not to use categorized xAxis but linear or datetime with label formatter like this:
xAxis: {
labels: {
formatter: function(){
return categories[this.value];
}
}
}
where categories is an array of categories.
It looks like that is the only way to make the chart behave this way.
I'm using highchart to show some text next to a plot line on the xAxis. I would like to customize each label from a formatter function as it is possible on every other labels in the chart.
I've seen another topic on this matter but they're using TypeScript and I don't.
What I'm doing is :
vay chart = new HighChart({
...
xAxis: {
plotLines: [{
id: "plotLines",
zIndex: 15,
color: myColor,
width: 1,
value: theXvalue, //x value where to show the line
label: {
formatter: function () {
return " VAL > "+this.value;
}
},
}]
},
...
});
If I set the 'text' value in the label it shows up and it works like a charm.
Any help to use a formatter for those labels ?
Unfortunately you cannot use formatter, you should define content of label in text object, which can be wrapped in html elements, but then you need to set [useHTML(http://api.highcharts.com/highcharts#xAxis.plotLines.label.useHTML) parameter
Set the useHTML value to true and set your html content inside text. Here is an example of how to achieve it http://jsfiddle.net/9mvwpqf3/1/
yAxis: {
plotLines: [{
color: 'red',
width: 2,
value: 100,
label: {
useHTML: true,
text: '<button>Click Me</button>',
},
}]
},