How to colorize highcharts above threshold value? - highcharts

How can I colorize an area chart above a threshold value along the y-axis with highcharts just like in the figure? I am sure about its chart type also. Is it the area chart?

You can use area series type with zones, for example:
series: [{
data: [...],
type: 'area',
zones: [{
value: 5,
color: 'green'
}, {
color: 'red'
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/u1pg9qdj/
API Reference: https://api.highcharts.com/highcharts/series.area.zones

Related

Hichcharts (Highstock) — Why isn't the plotLine being drawn on the chart?

Why isn't the plotLine being drawn on the chart? I've been trying to figure this out for at least 2 hours.
The goal is to add a plotLine in line with a candlestick at any given index (100 in the example). So candle at index 100 in the ohlcarray would be highlighted in the chart. To do this I set the value of the plotLine to 100. Am I doing it wrong?
I really appreciate your help.
// ASSUME WE HAVE 300 BARS
const symbol = 'APPL';
const volume = [ ... ];
const ohlc = [ ... ];
Highcharts.stockChart('chart', {
cropThreshold: 500,
xAxis: {
plotLines: [{
color: 'red',
dashStyle: 'longdashdot',
value: 100,
width: 1,
zIndex: 5
}],
},
series: [{
type: 'candlestick',
id: `${symbol}-ohlc`,
name: `${symbol} OHLC`,
data: ohlc,
}, {
type: 'column',
id: `${symbol}-volume`,
name: `${symbol} Volume`,
data: volume,
yAxis: 1,
}]
});
You need to remember that your xAxis type is set as datetime, so 100 value is just a few seconds after 1 Jan 1970. To make it work you need to set a date value that fits to the chart range.
Demo: https://jsfiddle.net/BlackLabel/1gwvcy9L/

it is possible to style HIGHCHARTS like this?

it is possible to style HIGHCHARTS like this?
please see here
Yes, it is possible. All you need to do is to use zones with x axis.
Highcharts.chart('container', {
series: [{
...,
zoneAxis: 'x',
zones: [{
value: 2,
fillColor: 'red',
color: 'red'
}, ...],
marker: {
enabled: false
}
}]
});
Live demo: http://jsfiddle.net/BlackLabel/pr49c3je/
API Reference: https://api.highcharts.com/highcharts/series.area.zones

Using highcharts, how can I plot a column chart that color individual columns based on value and display legend as shown on the attached image?

Using highcharts, how can I plot a column chart that color individual columns depending on value and display legend based on value? See example on the image below
Use chart with multiple column series and x-axis with category type:
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: [...]
},
series: [{
color: 'red',
data: [...]
}, {
color: 'green',
data: [...]
}, {
color: 'blue',
data: [...]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/57yzefq4/
API Reference:
https://api.highcharts.com/highcharts/series
https://api.highcharts.com/highcharts/xAxis.categories

Highchart line chart with category do not occupy full width

I'm using Highchart to generate a line chart with data labels. Here is an example of what I'm doing:
Highcharts.chart('container', {
title: {
text: 'Chart without categories'
},
xAxis: {
categories: ['a','b'],
},
series: [{
data: [1,2]
}]
});
This code generates the following chart: As you can see, there is a space between the line and and the borders of the chart.
Without using categories, there is no space:
What can I do to remove this spaces?
That is a default behavior of category axis type. Please check this example: http://jsfiddle.net/BlackLabel/wuqxb2cy/ with a more visible distribution into categories.
As a solution you can set xAxis.tickmarkPlacement and series.pointPlacement to 'on':
xAxis: {
categories: [...],
tickmarkPlacement: 'on'
},
series: [{
data: [...],
pointPlacement: 'on'
}]
Live demo: http://jsfiddle.net/BlackLabel/qkezc3mx/
API Refefence:
https://api.highcharts.com/highcharts/xAxis.tickmarkPlacement
https://api.highcharts.com/highcharts/series.line.pointPlacement

Cannot plot scatter and columnrange graph with multiple y-axis

I am trying to plot a 'scatter' graph and 'columnrange' graph with multiple y-axis (ie two graphs stacked on top of each other with common x-axis). The scatter plot represents an event that occured in particular month and columnrange plot represents the time duration of an event. Both the graphs represent one and only one event type. I tried many things but was not able to produce a graph with my requirements.
$(function() {
$('#container').highcharts({
title: { text: null },
subtitle: { text: null },
legend: { enabled: false },
xAxis: {
type: 'datetime',
title: { text: null }
},
yAxis: [{
top: 10,
height: 60,
offset: 0,
title: { text: 'Plot 1'}
},{
top: 80,
height: 60,
offset: 0,
title: { text: 'Plot 2'}
}]
});
chart = $('#container').highcharts();
chart.addSeries({
yAxis: 0,
type: 'scatter',
marker: {
enabled: true,
symbol: 'triangle'
},
data: [[1356977700000,1], [1359656100000,1], [1364753700000,1]]
});
chart.addSeries({
yAxis: 1,
type: 'columnrange',
data: [[1356977700000, 1359656100000], [1362075300000, 1364753700000]]
});
});
This is how I want to represent columnrange graph
This is how my current plot looks like (second graph is behaving as 'column' graph instead of 'columnrange')
Also I would like to locate the scatter plot points in the middle of the area assigned for scatter plot. How can I achieve that. (currently I have set y=1 for scatter graph.)
To have columnrange series inverted a chart needs to be inverted.
If you want for columntange points to share same horizontal line, then set same x value for points.
Example: http://jsfiddle.net/ubdxdqnh/

Resources