I am trying to create vertical red line on the already created graph, but it should compare the date on the x-axis to create line code.
plotLines: [{
color: '#FF0000',
width: 2,
value: Date.UTC(2012, 08, 18)
}]
Нere is an example: http://jsfiddle.net/neetu/5vfdrhmp/
Thank you
With your current setup you need to use a value that refers to the position of the date in the category array.
For example to place the line in the middle of 2013 Q2 then use 16.5 - because the 2013 Q2 category is the 16th item in the category and you can then use a decimal to position it exactly.
plotLines: [{
color: '#FF0000',
width: 2,
value: 16.5
}]
See fiddle
This will require a certain amount of math though to determine where on the axis the line should fall...
Related
I'd like to create a highcharts scatter diagram showing wind direction (y) on a time axis (x). The color of the points should be calculated using the wind speed. How could this be done? The result should look like the attached example, where red dots indicate high speed, green and yellow low speed.
One solution would be to split the data into 12 series (Beaufort 1-12) with different colors, shown in the same chart, but I would prefer to find a method to calculate the colors for each point seperately.
You can use colorAxis with dataClasses and colorKey for the series. For example:
colorAxis: {
dataClasses: [{
to: 10,
color: 'green'
}, {
to: 50,
from: 10,
color: 'yellow'
}, {
to: 100,
from: 50,
color: 'red'
}]
},
series: [{
colorKey: 'speed',
data: [{
x: 0,
y: 1,
speed: 10
}, ...],
type: 'scatter'
}]
Live demo: http://jsfiddle.net/BlackLabel/5po1Lqym/
Docs: https://www.highcharts.com/docs/maps/color-axis
API Reference: https://api.highcharts.com/highcharts/colorAxis.dataClasses
I'm trying to graphic some values, I have this part, then I want to add some max and min line, I could do this creating another series and adding the min/max value that I want, the problem here is that my value series is an array of n elements so I want to know if I could create the min/max series for example just doing data: [2] and put the line in all the width of my chart. Something like this:
If there is no way to do this, just if is possible doing: data[2, 2, 2,.... n] is possible to show only the first and the last point and hide the rest of them?
Here is my working code
You can use plotLines for this.
Example:
yAxis: {
softMax: max,
min: 0,
plotLines: [{
value: min,
width: 1,
color: 'rgba(204,0,0,0.75)'
},{
value: max,
width: 1,
color: 'rgba(204,0,0,0.75)'
}]
}
Updated pen:
http://codepen.io/jlbriggs/pen/LbJQEV
Alternatively, if you really want it to be a series, you can grab the min and max x values, and provide your data as arrays of [x,y] pairs. Something like:
series: [{
name: 'Actual Series'
...
},{
name: 'Max',
data: [[xMin,yMax],[xMax,yMax]]
},{
name: 'Min',
data: [[xMin,yMin],[xMax,yMin]]
}]
I want to trace a vertical time line on the current day, but I didn't found solution on HighCharts documentation.
Like this :
You're looking for a plot line. See the documentation here: http://api.highcharts.com/highcharts#xAxis.plotLines.
The basic format is:
xAxis: {
plotLines: [{
color: '#FF0000', // Red
width: 2,
value: 5.5 // Position, you'll have to translate this to the values on your x axis
}]
},
Is it possible to have a diagonal plotline in highcharts?
I have a line chart which tracks weightloss (y axis = weight, x axis = time), and I need a plotline which starts at the initial weight, and plots diagonally to the time when the user should have lost the weight by.
I can plot a simply flat plotline like this:
plotLines: [{
value: 0.696,
width: 3,
color: 'red',
dashStyle: 'dash',
label: {
text: 'Latest value',
align: 'right',
y: 5,
x: 0
}
}]
but, that's just a simple flat line.
Any ideas?
Easiest way is to simply use a separate line series.
Plot just your first and last point. You can disable markers, turn off mousetracking, and hide from the legend if you want it to behave just like a plotLine.
http://api.highcharts.com/highcharts#plotOptions.series.enableMouseTracking
http://api.highcharts.com/highcharts#plotOptions.series.marker.enabled
http://api.highcharts.com/highcharts#plotOptions.series.showInLegend
Plotlines can be horizontal or vertical, but you can use renderer to add custom line (like diagonal) in the chart: http://api.highcharts.com/highcharts#Renderer.path()
Simply put I am looking for a way to set two or more plotLines in highcharts/highstocks. The API doccuments do a good job of showing how to set one although I am not sure if there is a way to set two of them.
Yes it is possible, just declare multiple plotLine configurations in the array:
plotLines: [{
color: '#FF0000',
width: 2,
value: 4.5
}, {
color: '#00FF00',
width: 2,
value: 5.5
}]
Example on jsfiddle
Is there a method where i can supply an array of points to value ? Instead of new tags
{
color: '#00FF00',
width: 2,
value: 5.5
}
for each point .