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 :)
Related
I want some customization in the Gantt chart as follows:
display some text/html on the top left section (interaction of x and y-axis)
show x Axis (header) with black color in the background and some other customization in styles but got nothing in documentation.
Please refer attached image.
https://i.stack.imgur.com/Ir1gN.png
You can render text via SVG renderer, set position from the plot area. What interaction section do you mean, could you show screenshot?
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Gantt chart is draw by line, and draw automatically, you can't find background options for axis in our documentation.
Possibility to make this is draw rectangle by SVG renderer and set them under draw line.
chart: {
events: {
render: function() {
var chart = this,
series = chart.series,
plotLeft = chart.plotLeft,
plotTop = chart.plotTop,
plotWidth = chart.plotWidth;
if (chart.myBackground) {
chart.myBackground.destroy();
}
chart.myBackground = chart.renderer.rect(plotLeft, plotTop, plotWidth, 50, 0)
.attr({
'stroke-width': 2,
stroke: 'red',
fill: 'yellow',
opacity: 0.5,
zIndex: -1
})
.add();
}
}
},
Live demo:
https://jsfiddle.net/BlackLabel/xmg31aez/
I want to align Highcharts PlotLine Label with the line (not top or bottom). Is it possible?
Thank!
I think that the easiest way to achieve it is by rendering the plotLine and adding the custom label on it to cover part of the line.
Demo: https://jsfiddle.net/BlackLabel/b50k6hov/
Code:
chart: {
events: {
render() {
let chart = this,
plotLineCor = chart.yAxis[0].plotLinesAndBands[0].svgElem.d.split(' '),
x = plotLineCor[1],
y = plotLineCor[2];
if (!chart.label) {
// render label in init position
chart.label = chart.renderer.label('TEXT', 0, 0)
.css({
color: 'red'
})
.attr({
fill: 'white',
padding: 12,
zIndex: 6
})
.add();
}
// translate label after reach resize
chart.label.translate(x, y - chart.label.getBBox().height / 2)
}
}
},
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
API: https://api.highcharts.com/highcharts/chart.events.render
I am implementing a Sankey charts using Highcharts where I need to display each nodes in specific symbol. I want to implement marker symbol feature for my Sankey graph.
I tried using marker.symbol which is not working.
marker: {
symbol: 'triangle'
}
Is there a way to implement custom symbols for Sankey graph? Also is there a way where I can control the width of links between each nodes? All my nodes have same weight, hence I want a way to fix my width.
Highcharts does not provide options that will allow to modify the marker symbol and the link width for sankey chart type, so it is not possible by default.
Workaround
To modify the links width, set scale and translate attributes.
To change the markers, use Highcharts.SVGRenderer and replace default rects by triangles.
chart: {
height: 200,
events: {
load: function() {
var points = this.series[0].points,
fromNodeBBox,
toNodeBBox,
linkBBox;
points.forEach(function(p) {
fromNodeBBox = p.fromNode.graphic.getBBox();
toNodeBBox = p.toNode.graphic.getBBox();
this.renderer.symbol(
'triangle',
fromNodeBBox.x + this.plotLeft + 10,
fromNodeBBox.y + this.plotTop,
fromNodeBBox.width,
fromNodeBBox.height
).attr({
fill: p.fromNode.color
}).add();
this.renderer.symbol(
'triangle',
toNodeBBox.x + this.plotLeft - 10,
toNodeBBox.y + this.plotTop,
toNodeBBox.width,
toNodeBBox.height
).attr({
fill: p.toNode.color,
zIndex: 3
}).add();
linkBBox = p.graphic.getBBox();
p.graphic.attr({
transform: 'scale(1 0.5) translate(0 ' + (linkBBox.y + fromNodeBBox.height / 2) + ')'
});
p.fromNode.graphic.destroy();
p.toNode.graphic.destroy();
}, this);
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/f4u03qvd/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#symbol
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/
i'm using Highcharts to create a pie, and I need to put user's profile image in a circle in the middle of it. I have managed to add the image but couldn't get it to be round, and I managed to add a circle but without image background :/
what it the best way to combine the tow?
by the way it must be part of the svg and not an absolute div on top of the pie, because the tooltip needs to be on top of that image with opacity
to add a circle I used this code :
var pixelX = 438;
var pixelY = 276;
var pixelR = 70;
// add my circle
chart.renderer.circle(pixelX, pixelY, pixelR)
.attr({
zIndex: 100,
align: 'center',
// fill: 'url(https://lh6.googleusercontent.com/-gaAgFzRLxQQ/AAAAAAAAAAI/AAAAAAAAAjc/ies0iU4BEqU/photo.jpg)',
color: 'url(https://lh6.googleusercontent.com/-gaAgFzRLxQQ/AAAAAAAAAAI/AAAAAAAAAjc/ies0iU4BEqU/photo.jpg)',
stroke: 'black',
'stroke-width': 2
})
.css({
backgroundImage :'url(https://lh6.googleusercontent.com/-gaAgFzRLxQQ/AAAAAAAAAAI/AAAAAAAAAjc/ies0iU4BEqU/photo.jpg)'
})
.add();
});
this example shows how to do it with pure SVG : http://jsfiddle.net/9zkfodwp/1/
resolved it by defining a pattern with the img, works fine but now need to find a way for the pattern to be no-repeat.
code used to add pattern:
function(chart) { // on complete
var r = chart.renderer,
pattern = r.createElement('pattern')
.attr({
id: 'pattern',
patternUnits: 'userSpaceOnUse',
x: 0,
y: 0,
width: 180,
height: 190,
viewBox: '0 0 135 135'
})
.add(r.defs);
r.rect(0, 0, 135, 135, 0)
.attr('fill', '#ddd')
.add(pattern);
r.image(profileImg,0,0,135,135)
.add(pattern);
});
and when I add the circle it can have a fill of the pattern:
// add my circle
this.circle = chart.renderer.circle(pixelX, pixelY, pixelR).attr({
fill: 'url(#pattern)'
});
this.circle.add();