I would like to click or mouse over on target legend and make it show tooltip like we mouse over on part of the pie chart.
A problem is I have data like this
some data too small and difficult to target by mouse over
PS. I disable clicking the legends to show/hide the data in the chart.
Add the event using jQuery like below...
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'pie'
},
legend: {
enabled: true
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] ,
showInLegend: true
}]
});
// Apply events to text elements (SVG) and spans within the legend (VML + modern browsers with useHTML option).
$('.highcharts-legend text, .highcharts-legend span').each(function(index, element) {
$(element).hover(function() {
chart.tooltip.refresh(chart.series[0].data[index]);
},function() {
chart.tooltip.hide();
})
});
http://jsfiddle.net/highcharts/5V33F/
Related
I have the following chart, and I need to delete the default internal margin (market with red boxes)
I havent been able to do so
This is my current code
Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'xy',
margin: [0,0,0,0],
},
title: {text: null},
legend: { enabled: false },
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
https://jsfiddle.net/41z9qk2m/
This is the doc page
https://api.highcharts.com/highcharts/chart.margin
Use
xAxis ,and yAxis min max
as per
https://api.highcharts.com/highcharts/xAxis.max
http://jsfiddle.net/n0mq739a/
I'm trying to change the series legend text color from black, to anything besides black:
$(function () {
$('#container').highcharts({
legend: {
color: '#FF0000',
backgroundColor: '#FCFFC5'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
This is all I found on the legend in the HighCharts docs, is there another way to change that color?
http://api.highcharts.com/highcharts#legend
Here we go:
You need to specify itemStyle. e.g.
itemStyle:{'font-size':'30px'}
Depending on the css you want to use, you may also have to set 'useHTML'. From the documentation:
Using HTML allows for advanced formatting, images and reliable bi-directional text rendering.
Here is an example: http://jsfiddle.net/kHzr9/
Hope it helps;)
Given a chart like the example for setting category label styles, how can I set styles for each label individually? E.g., make "Jan" red, "Feb" green, and so on.
Here's the pertinent part of the JSFiddle, which sets all categories to red:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
style: {
color: 'red'
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
I could use a formatter method to wrap each label in HTML and then conditionally set its style based on this.value, but surely there's a more direct approach?
I would like to apply a font-stretch property to a text in Highcharts.
How can I do this ?
Here is a jsFiddle I've already tried : http://jsfiddle.net/5hPcP/11/
But it does nothing.
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events:{
load: function(){
this.renderer.text('Stretched text',60, 60 ).
css({
fontStretch:"extra-expanded",
fontSize : "12pt"
}).attr({
fontStretch:"extra-expanded",
zIndex: 10000
}).add();
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
W3C CSS info.
W3C SVG text. Then search for stretch.
I'm trying to set textShadow property to style of data labels but it doesn't work (ignored):
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar',
'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
style: {
fontWeight:'bold',
textShadow: "2px 2px #ff0000",
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0,
176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
http://jsfiddle.net/TJFBy/
Is there a way to apply a drop shadow to data labels? The reason is to make labels look similar to graph line.
If you are working in fiddle, you should change the current JQuery library (you are working with JQuery 1.4)
You need to load hightcharts API.
<script src="http://code.highcharts.com/highcharts.js"></script>
And you should remove the 'comma' (,) next to the textShadow: "2px 2px #ff0000" line, many browsers don't render script code with sintax errors (especially IE)
Check the fiddle fixed