I want to display line on linear chart like this:
It is plotline with angle.
How do I add plotline on highcharts with angle?
You can use Highcharts.SVGRenderer class to add the line:
chart: {
events: {
load: function() {
this.renderer.path(['M', 100, 50, 'L', 200, 300])
.attr({
'stroke-width': 2,
stroke: 'red'
})
.add();
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/u0hntrp6/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
Related
I am using the highmaps to generate the custom/africa map but I need to make a modification which is to add dotted line in the country Morocco (and remove Western Sahara). This is a political decision... so how can I add a dotted line in the middle of a country?
Help is very much appreciated.
Regards.
In load event function, you can use SVGRenderer class to render a dotted path:
chart: {
map: 'custom/africa',
events: {
load: function() {
var point = this.series[0].points[0];
this.renderer.path([
'M', 180, 20, 'L', 210, 40, 220, 80, 300, 100
])
.attr({
'stroke-width': 2,
stroke: 'red',
'stroke-dasharray': "5, 2"
}).add(point.graphic.parentGroup);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/5xv8k41w/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
I want to set a border for a pie,but when there is no data the pie become this
How to realize it?
You can catch the load event, check series.data length and if its empty, then use renderer to add empty circle.
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
events:{
load: function() {
var chart = this,
series = chart.series[0],
center = series.center;
if(series.data.length === 0) {
chart.renderer.circle(center[0],center[1],100)
.attr({
fill:'rgba(0,0,0,0)',
stroke: 'red',
'stroke-width': 1
})
.add();
}
}
}
},
Example:
http://jsfiddle.net/u6tax8x4/
Pie with default border stroke will show up in the newest versions. I guess it is just the versioning issue here.
Please update the highcharts to latest version here : https://code.highcharts.com/zips/Highcharts-8.0.0.zip
How do I include the events text to the left of chart when exporting in HighCharts.
The text disappears on export.
ref: http://jsfiddle.net/no1uknow/4PU9j/
events: {
load: function () {
var label = this.renderer.html("36 Aircraft delivered to Air 1<UL><li>13 in 2013</li><li>23 in 2014</li></UL>52 Aircraft remaining on Air 2 certificate")
.css({
width: '180px'
})
.attr({
'stroke': 'silver',
'stroke-width': 1,
'r': 5,
'padding': 10
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'left',
x: 0, // offset
verticalAlign: 'top',
y: 40 // offset
}), null, 'spacingBox');
}
},
marginLeft: 300
},
The exporting function in Highcharts renders the original chart as it was passed in first, not after it's been modified by further actions, such as using the renderer to add text. Fortunately, you can manually call the exportChart function and pass in additional chart settings, including functions for adding the renderer text. This will let you do what you want.
See here for details: Can not exporting renderer shapes added in callback function in highcharts / highstock
You need to use a renderer text instead of html (which is not exported).
events: {
load: function () {
var label = this.renderer.text("36 Aircraft delivered to Air 1<UL><li>13 in 2013</li><li>23 in 2014</li></UL>52 Aircraft remaining on Air 2 certificate",100,100)
.css({
width: '180px'
})
.attr({
'stroke': 'silver',
'stroke-width': 1,
'r': 5,
'padding': 10
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'left',
x: 0, // offset
verticalAlign: 'top',
y: 40 // offset
}), null, 'spacingBox');
}
},
Example: http://jsfiddle.net/4PU9j/1/
I have text on a chart like below. I want to change the font size of the text "abc". I tried putting 'font-size':'8px' inside of the css, but it did not work. Does anyone have an idea about this?
Here is the fiddle link:
http://jsfiddle.net/3hGz2/
'events': {
'load': function () {
var label = this['renderer']['label']('* y='+ slope +'x'+'+('+ intercept + ')<br> R^2='+ rSquare)
.css({
'width': '150px',
'color' : 'grey',
'font-size':'8px'
})
.attr({
'stroke': 'grey',
'stroke-width': 0,
'r': 5,
'padding': 3
})
.add();
label.align(Highcharts.extend(['label']['getBBox()'], {
'align': 'right',
'x': -110, // offset
'verticalAlign': 'bottom',
'y': -130 // offset
}), null, 'spacingBox');
}
}
See http://jsfiddle.net/3hGz2/1/
you can specify the font size as fontSize
.css({
'width': '150px',
'color' : 'grey',
'fontSize':'20px'
})
click: function() {
if (!hasPlotLine) {
chart.xAxis[0].addPlotLine({
value: 5.5,
color: '#FF0000',
width: 2,
id: 'plot-line-1'
});
} else {
chart.xAxis[0].removePlotLine('plot-line-1');
}
hasPlotLine = !hasPlotLine;
}
Am trying to add and remove the plot lines on click event and I ended up with this eeror "Cannot read property xAxis of undefined"
DEMO
I assume what you would like to remove "old" plotLine and add new in clicked x value. So first of all I recommend to remove conditions, and only use remove/add plotline.
http://jsfiddle.net/FzNqA/8/
click: function () {
var chart = this.series.chart.xAxis[0];
chart.removePlotLine('plot-line-1');
chart.addPlotLine({
value: this.x,
color: '#FF0000',
width: 2,
id: 'plot-line-1'
});
}