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'
})
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 have an indicator which is a function of x, y.
How can i draw this indicator on top of chart?
Lets say here https://jsfiddle.net/yv3pehj8/
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
var chart = this.series.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label('')
.attr({
padding: 10,
r: 10,
fill: Highcharts.getOptions().colors[1]
})
.css({
color: '#FFFFFF'
})
.add();
}
chart.lbl
.show()
.attr({
text: 'x: ' + this.x + ', y: ' + this.y
});
}
}
}
Instead of printing x,y value on the corner, I wanted to draw a line at an angle of 45 degrees to the hover point ranging from [x-10, x+10]. How could I do it in the most performant way?
TIA
EDIT
Many thanks for the solution. To make it a bit more complicated. i want to reach the following effect as seen in this image []
i want to draw the blue/red curves as you see in the image on mouse hover.. Would you happen to have a solution for this #ppotaczek??
Instead of rendering the label, you can render a path:
plotOptions: {
series: {
point: {
events: {
mouseOver: function() {
var chart = this.series.chart,
path = [
'M',
chart.plotLeft + this.plotX - 10,
chart.plotTop + this.plotY - 10,
'L',
chart.plotLeft + this.plotX + 10,
chart.plotTop + this.plotY + 10
];
if (!chart.lbl) {
chart.lbl = chart.renderer.path(path)
.attr({
'stroke-width': 2,
stroke: 'red'
})
.add();
}
chart.lbl
.show()
.attr({
d: path
});
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/zo46fuxb/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
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/
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/
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/