I am using a highchart pie chart and displaying the data in the centre via.
function(chart1) { // on complete
var xpos = '50%';
var ypos = '50%';
var circleradius = 40;
// Render the circle
chart1.renderer.circle(xpos, ypos, circleradius).attr({
fill: '#fff',
}).add();
// Render the text
chart1.renderer.text(chart1.series[0].data[0].percentage + '%', 62, 80).css({
width: circleradius * 2,
color: '#4572A7',
fontSize: '16px',
textAlign: 'center'
}).attr({
// why doesn't zIndex get the text in front of the chart?
zIndex: 999
}).add();
});
However I would like to prevent displaying any decimal places, currently 33.33333%. I would like to display this as 33%
Is this possible, I know there is a setting allowDecimals but this did not work.
You get original percentage value from point, which it is not rounded. Use JS Math.round function:
chart1.renderer.text(Math.round(chart1.series[0].data[0].percentage) + '%', 62, 80)
.css({
width: circleradius * 2,
color: '#4572A7',
fontSize: '16px',
textAlign: 'center'
})
.attr({
zIndex: 999
})
.add();
Live demo: https://jsfiddle.net/BlackLabel/0z4hLbaw/
Related
I have series legends as scrollbar as demo-ed in this fiddle
http://jsfiddle.net/BlackLabel/kb4gu5rn/
How can I draw series legend marker ("circle"/"square"/"diamond" etc..) instead of line
var $line = $('<div>')
.css({
width: 16,
position: 'absolute',
left: -20,
top: 8,
borderTop: '2px solid ' + (series.visible ? series.color :
options.itemHiddenStyle.color)
})
.appendTo($legendItem);
Also upon hover in this legendItemList I would like to trigger the mouseOver event on the series.. To highlight the series(or data points) in the chart for easy co-visualization
I added this handler, but it doesnt work
$legendItem.hover(function () {
series.onMouseOver();
});
Thanks for your help
You can use Highcharts.SVGRenderer class to add a specific legend marker symbol.
To highlight the series use setState('hover):
var chart = Highcharts.chart({...},
function(chart) {
var options = chart.options.legend,
legend = chart.legend;
/**
* What happens when the user clicks the legend item
*/
function clickItem(series, $legendItem, symbolLine, symbolSVG) {
series.setVisible();
$legendItem.css(
options[series.visible ? 'itemStyle' : 'itemHiddenStyle']
);
symbolLine.attr({
stroke: series.visible ? series.color : options.itemHiddenStyle.color
});
symbolSVG.attr({
fill: series.visible ? series.color : options.itemHiddenStyle.color
});
}
// Create the legend box
var $legend = $('<div>')
.css({
width: 110,
maxHeight: 210,
padding: 10,
position: 'absolute',
overflow: 'auto',
right: 10,
top: 40,
borderColor: options.borderColor,
borderWidth: options.borderWidth,
borderStyle: 'solid',
borderRadius: options.borderRadius
})
.appendTo(chart.container);
$.each(chart.series, function(i, series) {
// crete the legend item
var $legendItem = $('<div>')
.css({
position: 'relative',
marginLeft: 20
})
.css(options[series.visible ? 'itemStyle' : 'itemHiddenStyle'])
.html(series.name)
.appendTo($legend);
// create the line with each series color
var symbolEl = $('<div>');
var renderer = new Highcharts.Renderer(
symbolEl[0],
16,
10
);
var symbolLine = renderer
.path([
'M',
0,
5,
'L',
16,
5
])
.attr({
'stroke-width': 2,
stroke: series.color
})
.add();
var symbolSVG = renderer.symbol(
series.symbol,
3,
0,
10,
10,
Highcharts.merge(series.options.marker, {
width: 10,
height: 10
})
).attr({
fill: series.color
})
.add();
symbolEl.css({
position: 'absolute',
left: -20,
top: 2
}).appendTo($legendItem);
// click handler
$legendItem.hover(function() {
chart.series.forEach(function(s) {
if (s !== series) {
s.setState('inactive');
} else {
series.setState('hover');
}
});
}, function() {
chart.series.forEach(function(s) {
s.setState('normal');
});
});
$legendItem.click(function() {
clickItem(series, $legendItem, symbolLine, symbolSVG);
});
});
});
Live demo: http://jsfiddle.net/BlackLabel/mfvh9ubq/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Series#setState
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#symbol
I am trying to get an information card (consisting of a Konva.Rect and Konva.Text) to appear below an image while hovering over it. I've tried combining the info card into a separate child group and added it to a parent group that consists of the image and the image label. The issue is that when hovering over the image the rectangle appears far off to the right rather than in the correct x,y position. How can I set the child group's coordinates such that if the image moves across the screen the info card will always appear below it?
I've tried setting the rectangle's x attribute as group.x() (where group is the parent group's x coordinate). I've also tried setting it as image.x() yet the rectangle still appears far off to the right of the parent image.
let group = new Konva.Group({
x: 100,
y: 20,
id: attr.status,
visible: ng.checkboxValues[status] ? true : false,
});
let image = new Konva.Image({
x: group.x(),
y: group.y(),
image: DOMImage,
width: 40,
height: 40,
listening: true,
visible: true,
});
let robotAlias = new Konva.Text({
x: image.x() - 20,
y: image.y() + 10,
text: attr.alias,
fontSize: 13,
fontFamily: 'Roboto',
fill: ng.colorMap[attr.status],
visible: true,
});
let complexText = new Konva.Text({
x: image.x(),
y: image.y(),
text: `${attr.alias}-${attr.status}`,
fontSize: 15,
padding: 10,
fontFamily: 'Roboto',
align: 'center',
fill: this.colorMap[attr.status],
height: 60,
width: 160,
visible: true,
});
let rect = new Konva.Rect({
x: image.x(),
y: image.y(),
stroke: '#fff',
strokeWidth: 1,
fill: '#fff',
height: 60,
width: 160,
shadowColor: 'black',
shadowBlur: 5,
shadowOffset: [10, 10],
shadowOpacity: 0.2,
visible: true,
});
let descriptionCardGroup = new Konva.Group({
x: image.x(),
y: image.y(),
visible: false,
name: `${attr.id}`,
})
group.add(image);
group.add(robotAlias);
descriptionCardGroup.add(rect);
descriptionCardGroup.add(complexText);
group.add(descriptionCardGroup);
Here's a screenshot of the current behavior: https://ibb.co/QMYjxrw
I just check a post regarding making a label with design using renderer.label and plotline animate (Add design to plotLabel Highcharts). My question is, Is there a way to use chart.renderer.path as the moving horizontal gridline instead of using the common plotline ? I am a bit confuse on how to use the renderer.path. Can you help me with it? Really appreciate your help with this.
const plotband = yAxis.addPlotLine({
value: 66,
color: 'red',
width: 2,
id: 'plot-line-1',
/* label: {
text: 66,
align: 'right',
y: newY,
x: 0
}*/
});
const labelOffset = 15
const plotbandLabel = this.renderer.label((66).toFixed(2), chart.plotLeft + chart.plotWidth - 8, yAxis.toPixels(66) - labelOffset, 'rect').css({
color: '#FFFFFF'
}).attr({
align: 'right',
zIndex: 99,
fill: 'rgba(0, 0, 0, 0.75)',
padding: 8
})
.add()
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
plotLine = yAxis.plotLinesAndBands[0].svgElem;
d = plotLine.d.split(' ');
newY = yAxis.toPixels(y) - d[2];
plotlabel = yAxis.plotLinesAndBands[0].label;
plotbandLabel.animate({
y: yAxis.toPixels(y) - labelOffset
}, {
duration: 400,
step: function() {
this.attr({
text: yAxis.toValue(this.y + labelOffset).toFixed(2)
})
},
complete: function() {
this.attr({
text: y.toFixed(2)
})
}
}),
plotLine.animate({
translateY: newY
}, 400);
Please see this jsfiddle I got from the previous post. http://jsfiddle.net/x8vhp0gr/
Thank you so much
I modified demo provided by you. Now, instead of adding a plot line, path is created.
pathLine = this.renderer.path([
'M',
chart.plotLeft,
initialValue,
'L',
chart.plotWidth + chart.plotLeft,
initialValue
])
.attr({
'stroke-width': 2,
stroke: 'red'
})
.add(svgGroup);
API Reference:
http://api.highcharts.com/highcharts/Renderer.path
Example:
http://jsfiddle.net/a64e5qkq/
Here is my chart : www.jsfiddle.net/bs9cLff5
I want to add the percent directly on the chart.
Example for team1 : I want to show 100% on the green.
Next, I would like to personalize the text in the label.
Team1
Good 100%
Become
Team1
'My text'
Is it possible?
Someone can help me please
Thank you everybody :D
You can use renderer to add custom elements (like text) in the chart.
chart.renderer.text('any text', 140, 140)
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
I can add to the previous answer, you can even define on click events for the label. It's very simple.
ren.label('message', 10, 10)
.attr({
fill: 'red',
stroke: 'white',
'stroke-width': 2,
padding: 5,
cursor: 'pointer',
r: 5
})
.css({
color: 'white',
width: '100px'
})
// action on click
.on('click', function () {
});
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/