referring to this thread How to wrap legend items in highcharts I successfully resized my legend width with
legend: {
itemStyle: {
width: 90 // or whatever
},
but I need to check some condition and if that condition is true i should highlight the label with bold, so I'm using a labelFormatter, but I've discovered that after adding the itemStyle option, my html tags works only until the carriage return... you can see this here: http://jsfiddle.net/yDWh9/5/
how can I solve this problem?
thank you
______edit_______
this is the code generated by highcharts:
<g class="highcharts-legend-item" zindex="1" transform="translate(8,18)">
<text x="21" y="15" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3E576F;width:290;fill:#3E576F;" text-anchor="start" zindex="2">
<tspan style="font-weight:bold" x="21">Lorem ipsum</tspan>
<tspan dy="16" x="21">dolor sit amet</tspan>
</text>
<rect rx="2" ry="2" fill="#AA4643" x="0" y="4" width="16" height="12" stroke-width="0.000001" zindex="3" stroke="#AA4643"></rect>
</g>
as you can see it breaks the string in two tspan and only the first has the font-weight:bold
Try
legend: {
useHTML: true,
itemStyle: {
width: 90 // or whatever
},
and series:
series: [{
name: '<b>Tokyo</b>',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: '<b>London</b>',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
Related
I am looking for the options to add a hyperlink to the stock chart. So that a user can click anywhere on the chart and redirect to another page.
Not on the series, I would like to add hyperlink on the chart itself.
You need to call function on your highchart container div.You can use following function.
$("#container").on("click", function(){
window.open('http://google.com', '_blank');
// You can also use if not cross domain request
//window.location.href='http://google.com';
});
Refer this fiddle link for example
Simply make your rendering element an <a> element with a href attribute pointing to where you wish to take users (just like any other hyperlink). Just make sure that this <a> element has a display property set as block:
$(function () {
Highcharts.chart('container', {
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
#container {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
Note that for this example I've used Highcharts' own Basic Line Chart demo.
When markers are disabled, the symbols used for a line chart are simple vertically-centered paths
but for area charts are rectangles
I'd like to use the paths for all chart types, and I can't figure out how. The closest I've gotten is to set legend.symbolHeight to 2, but this results in a bottom-aligned rectangle for the area chart:
Is it possible to tell all charts to use the vertically-centered path?
You can use a fake series with different type and then linked two series by the option.
series: [{
type: 'line',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
type: 'line',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
},{
type: 'line',
color: 'red',
}, {
color: 'red',
type: 'area',
showInLegend: false,
linkedTo:':previous',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}]
Example:
- http://jsfiddle.net/kjq0cn8p/
I use Highcharts to draw some charts. My language is Persian (Farsi) and I want to draw charts with Persian numbers. But in Highcharts all numbers show in English.
Is there a way that I show numbers (all numbers: yaxis,tooltip, ...) in Persian?
You can try the Highcharts Localization plugin by Milad Jafary. It includes Persian date and numbers by default, and can be exanded to other localizations. You'll still have to format the labels, but it does "the hard work" for you.
For example, a minimal example could be:
Highcharts.setOptions({
locale: getPersianLocal()
});
$('#container').highcharts({
xAxis: {
labels: {
formatter: function() {
// Example of replacing a normal number with persian number
return Highcharts.localizationNumber(this.value);
}
}
},
// ...
});
Similarly you can use formatter for your y-axis, tooltip, et cetera.
If you need to format a date you can use this function:
$(function () {
Highcharts.setOptions({
locale: getPersianLocal()
});
$('#container').highcharts({
tooltip: {
formatter: function() {
return '<span style="font-size: 10px">'+Highcharts.localizationNumber(this.key)+'</span><br/>'
+'<span style="color:{point.color}">\u25CF</span> '+this.series.name+': <b>'
+Highcharts.localizationNumber(this.y)+'</b><br/>';
}
},
xAxis: {
labels: {
formatter: function() {
return Highcharts.localizationNumber(this.value);
}
}
},
yAxis: {
labels: {
formatter: function() {
return Highcharts.localizationNumber(this.value);
}
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgithub.com/miladjafary/highcharts-plugins/master/js/jalali.js"></script>
<script src="https://rawgithub.com/miladjafary/highcharts-plugins/master/js/highcharts-localization.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Highcharts.localizationDateFormat('%A, %d %B %y, %H:%M:%S', new Date().getTime());
You will have to include the plugin scripts, for example:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgithub.com/miladjafary/highcharts-plugins/master/js/jalali.js"></script>
<script src="https://rawgithub.com/miladjafary/highcharts-plugins/master/js/highcharts-localization.js"></script>
See this more complete JSFiddle demonstration of it in use.
I my application i need to integrate highcharts with coffescript.
Please guide how to start with this. Is it customizable?. Because I need to integrate some links and buttons below the chart.
All you really need to do is take a javascript sample and use js2coffee.org to convert it to coffeescript.
Fiddle: http://jsfiddle.net/Rf8AS/
$ ->
$("#container").highcharts
title:
text: "Monthly Average Temperature"
x: -20 #center
subtitle:
text: "Source: WorldClimate.com"
x: -20
xAxis:
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
yAxis:
title:
text: "Temperature (°C)"
plotLines: [
value: 0
width: 1
color: "#808080"
]
tooltip:
valueSuffix: "°C"
legend:
layout: "vertical"
align: "right"
verticalAlign: "middle"
borderWidth: 0
series: [
name: "Tokyo"
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
,
name: "New York"
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
,
name: "Berlin"
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
,
name: "London"
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
]
From there, you'll need to decide how you want to serve the coffeescript to the browser. I use grunt, grunt-contrib-coffee and grunt-contrib-watch to build the javascript on the server side. Another option is connect-assets; if you want a sample app that uses connect-assets, angular and node.js check out Hoverbear's sample app: https://github.com/Hoverbear/Angular-Coffee-Express.
When using the jquery syntax $('#container').highcharts(...) and I later want to get a reference to the chart I get an error in IE 8. Example:
$('#container').highcharts({
chart: {
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
$('#container').highcharts().showLoading();
The final line fails in IE 8 (works in IE 10 + chrome etc) using version 3.0.1 og highcharts and 1.9.1 of jquery. Is this not the recommended way?
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)
Timestamp: Tue, 30 Apr 2013 08:07:37 UTC
Message: 'highcharts()' is null or not an object
Line: 66
Char: 9
Code: 0
URI: http://s3-eu-west-1.amazonaws.com/mala/highcharts.html