I'm trying to create a HighCharts Polar chart, something like the wind rose sample, but instead of columns being rendered as segments, I want to draw lines - something like this:
Anyone know if this is possible?
You could make every line a series in the following way:
series: [{
name: 'Line 1',
data: [{x:0, y: 0}, {x: 0, y: 43000}],
pointPlacement: 'on'
},
...
]
The above creates a line at 0 degrees, from 0 to 43000.
Working example: http://jsfiddle.net/ewolden/Lbeycjgs/1/
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 have a highstock chart with a scatter series that has overlapping points. The X values are identical but the Y values have slight variations. Because the variations are small the overlap is not exact but is still difficult for the user to distinguish.
When a scatter point is clicked / tapped I want to identify all data points that the mouse pointer / finger touches. However it seems like Highcharts will only raise a click event for the point on top of the stack. There are several suggestions online for iterating over all data points and finding those with matching Y values, however in my case I would need to apply some fuzzy logic and try and select points that look to the user like they're overlapping, based on the size of the marker and the height of the chart and this seems like a move in the wrong direction.
Is there anything within Highcharts I can use to find all the points the user interacted with?
JS Fiddle: http://jsfiddle.net/f22tq4t2/1/
Highcharts.stockChart('container', {
series: [{
type: 'scatter',
name: 'Demo scatter overlap',
data: [{x: 1500052112000, y: 5}, {x: 1500052112000, y: 5.1}, {x: 1500052118000, y: 15.1}, {x: 1500052118000, y: 15.2}]
}],
xAxis: {
min: 1500052109000,
max: 1500052119000,
type: "datetime"
},
plotOptions: {
series: {
point: {
events: {
click: (event) => {
alert('clicked ' + event.point.y);
}
}
}
}
}
});
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 work for a public school system and have been asked to emulate a dashboard like what Atlanta has. It features two charts that are occupying the same plot/chart area. On the left side of the chart is a bar graph, on the right side is what I'm assuming is a scatter graph. The link to this chart is here, the one on the left-hand side:
https://public.tableau.com/views/AttendanceandSuspensions1415/AttendanceDash?:embed=y&:display_count=no&:showVizHome=no#1
Is there a way to do this in Highcharts?
Yes. You can set multiple y axes, and set their positions.
Then you assign each data series to one of the axes.
Example:
yAxis: [{
left: 120, width: 200,
},{
offset: 0,
left: 345, width: 200,
}]
.
series: [{
yAxis: 0,
data: [...]
}, {
yAxis: 1,
type: 'scatter',
data: [...]
}]
Example fiddle:
http://jsfiddle.net/jlbriggs/j0eq21du/
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()