I am looking to add plotbands/zones to my highchart. I am referring to dark yellow bands below the marker points.
I have seen a few examples of how to draw plotBands but none seem to give the option of limit the height of plotBand.
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/axis-addplotband/
chart.xAxis[0].addPlotBand({
from: 5.5,
to: 7.5,
color: '#FCFFC5',
id: 'plot-band-1'
});
Any clue will be appreciated.
You should be able to use area series type and add break lines in your load (and redraw) event callback function, using chart.renderer.path:
var breakLines = function(chart) {
var xAxis = chart.xAxis[0],
yAxis = chart.yAxis[0];
$('.breakLines').remove();
Highcharts.each(chart.series[0].data, function(p) {
chart.renderer.path([
'M',
xAxis.toPixels(p.x),
yAxis.toPixels(0),
'L',
xAxis.toPixels(p.x),
yAxis.toPixels(p.y)
]).attr({
'stroke-width': 1,
stroke: 'white',
zIndex: 3
}).addClass('breakLines').add()
});
}
Here you can see an example how it can work: http://jsfiddle.net/jgyxcbxo/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 am trying to create a chart somehow similar to expertoptions' by using Highcharts, however I can't find solution to adding a custom marker to the line, I have tried doing something like:
var myCircle = myChart.renderer.circle(x,y,20).attr({
fill: '#d3d7de'
}).add(circlePointGroup);
var circlePointGroup = myChart.xAxis[0].renderer.g().attr({
translateX: 2000,
translateY: 2000
}).add();
but ended up being a floating static shape, I have here the fiddle, Any help would be appreciated. I have hard time reading their documentation :/
I think that a better approach might be adding this point as a scatter series - that keeps the point in the move while adding new points to the main series. Using renderer.circle renders circle in a static position.
Demo: https://jsfiddle.net/BlackLabel/Lpfj4stx/
var betWindowInterval = setInterval(function() {
myChart.xAxis[0].removePlotLine('markerLineX');
myChart.yAxis[0].removePlotLine('markerLineY');
myChart.series.forEach(s => {
if (s.options.id === 'customPoint') {
s.remove();
}
})
clearInterval(betWindowInterval)
}, 2000);
myChart.addSeries({
type: 'scatter',
data: [{x: lastPointY.x, y: lastPointY.y}],
id: 'customPoint',
marker: {
fillColor: 'red',
radius: 5,
symbol: 'circle'
}
})
API: https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries
I have a project using Highcharts 5 . I'm trying to get the chart labels on opposite sides of the donut graph, aligned straight left and straight right on each side, with the connectors spanning the distance appropriately.
Attached is the comp of what it should look like. Any thoughts on how to achieve this?
Thanks!
You can create the legend manually (html label and connector line with dot) using renderer:
var points = this.series[0].points,
renderer = this.renderer;
points.forEach(function(point) {
var labelOptions = point.options.label;
if (labelOptions) {
// text
renderer.text(labelOptions.text, labelOptions.x, labelOptions.y - 30, true).add();
// connector
var path = ['M', labelOptions.x, labelOptions.y].concat(labelOptions.connector.path);
renderer.path(path).attr({
stroke: 'gray',
'stroke-width': 1,
}).add();
// dot
renderer.circle(labelOptions.x, labelOptions.y, 3).attr({
fill: 'gray',
'stroke-width': 1,
}).add();
}
});
Options:
{
name: 'Microsoft Internet Explorer',
y: 56.33,
label: {
x: 400,
y: 100,
connector: {
path: ['l', -50, 0, 'l', 0, 100]
},
text: "<div class='label'><img src='https://wordpress.highcharts.com/blog/wp-content/uploads/2017/08/28160952/highcharts_logo.png' width='30' height='30'></img><div>Label text in HTML</div></div>"
}
}
Live working example (one label created): http://jsfiddle.net/kkulig/wdtpyof1/
This demo is only a good starting point. You should create your own mechanisms responsible for positioning labels.
API reference: http://api.highcharts.com/class-reference/Highcharts.SVGRenderer
This is solution for your issue
you can customize the connectors and get the chart labels on opposite sides of the donut graph.
http://jsfiddle.net/nmtri1101/ogfbxfqd/2/
Code jsfiddle :)
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()
I want to plot a scatter chart with lines connecting each point. Is it possible to vary the width of the line between each segment?
For example, I want the line from point A to point B to have a width of 5. I want the line between point B and point C to have a width of 2.
Sure, I could use the renderer to manually draw the lines, but then I have to handle the coordinates and scaling manually.
(FWIW, here's an example of a scatter plot with connecting lines.)
There is no configuration option to do this. The difficult way would be, as you say, to implement it your self with help of the renderer.
You can configure individual points with color and size:
data: [{
x: 161.2,
y: 51.6,
marker: {
radius: 15,
fillColor: 'rgb(255, 0, 0)'
}
}]
but the line that connects two markers do not have any individual settings.
There is a way to do this without using the renderer, however it is very much a hack.
The basic premise is that you can adjust the thickness of a line in Highcharts after render time by manipulating the SVG or VML attributes, and you can prevent Highcharts from changing it back. Therefore all you need to do is break up your series into two point series and chart them all at once. Code below, fiddle can be seen here http://jsfiddle.net/39rL9/
$(document).ready(function() {
//Define the data points
DATA = [
{x: 2,y: 4,thickness: 1},
{x: 7,y: 8,thickness: 8},
{x: 10,y: 10,thickness: 2},
{x: 22,y: 2,thickness: 10},
{x: 11,y: 20,thickness: 15},
{x: 5,y: 15,thickness: 2}
]
//Format the data into two point series
//and create an object that can be put
//directly into the "series" option
var finalSeries = [];
for (var i=0; i < DATA.length-1; i++) {
finalSeries[i]={};
finalSeries[i].data = [];
finalSeries[i].data.push(DATA[i]);
finalSeries[i].data.push(DATA[i+1])
};
//A function to change the thickness of
//the lines to the proper size
function changeLineThick(){
var drawnSeries = $(".highcharts-series")
for (var i=0; i < drawnSeries.length; i++) {
drawnSeries.eq(i)
.children("path")
.eq(3) //this could change depending on your series styling
.attr("stroke-width",DATA[i].thickness)
};
}
//Define and render the HighChart
chart = new Highcharts.Chart({
chart: {
renderTo: "chart-container",
defaultSeriesType: "scatter"
},
plotOptions: {
scatter: {
lineWidth: 2
}
},
symbols: ["circle","circle","circle","circle","circle","circle"],
series: finalSeries
})
changeLineThick();
//prevent Highcharts from reverting the line
//thincknesses by constantly setting them
//to the values you want
$("#chart-container").mousemove(function(){changeLineThick()})
})