I have a line chart and I customized the legend symbol. In chart, the customization by using useHTML and style of the div as the legend symbol is working but I am struggled on exporting customization.
I tried something like this :
exporting:{
allowHTML : true,
sourceWidth:1024,
chartOptions: {
title: {
style: {
fontSize: '14px'
}
},
legend : {
symbolPadding: 0,
symbolWidth: 0,
symbolHeight : 0,
symbolRadius: 0,
useHTML : true,
labelFormatter : function () {
return '<div>' +
'<div class="legend-symbol-bar" style="background-color: ' + this.color +';"> </div>' +
"<span> " + this.name + " </span>" +
'</div>'
}
}
}
}
But the legend of exporting is kinda not effective.
Here is the js fiddle.
It seems that Highcharts exporting omits the styles defined in CSS file. They work if you assign them via JS though (load event):
chartOptions: {
chart: {
events: {
load: function() {
this.legend.update({
symbolWidth: 0,
labelFormatter: function() {
this.legendSymbol.css({
display: 'none'
});
return '<div>' +
'<div style="width: 18px; height: 12px; display: inline-block; background-color: ' + this.color + ';"> </div>' +
"<span> " + this.name + " </span>" +
'</div>'
}
});
}
}
},
(...)
Legend symbols can be hidden via JS code too (css function).
Live demo: http://jsfiddle.net/kkulig/efhyabzs/
API references:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#css
https://api.highcharts.com/highcharts/chart.events.load
Related
I am trying to format the tooltip in a highcharts bubble chart
There is a lot of information I'd like to display with custom formats etc so I'm using the formatter function. It is all working fine except for the last line which is a html link (href tag). I want to be able to click on this link in the tooltip and be redirected to the new page however, currently, even though I can see the row highlighted with a link, I'm not being able to click on the link when it renders in the tooltip
Here's the code
const chartOptions = {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy',
height: 600,
},
title: {text: null},
legend: {
enabled: true
},
tooltip: {
useHTML: true,
formatter: function () {
return '<b>' + Highcharts.dateFormat('%e-%b', new Date(this.x)) + ' ' + this.y + '</b><br/>' +
'<b>' + 'ACV: ' + '</b>'+ '$' + Math.round(this.point.ACV / 1000).toFixed(1) + 'K' + '<br/>' +
'Type: ' + this.point.OPP_COB + '<br/>' + 'Name: ' + this.point.REP_NAME + '<br/>' +
'Link: ' + ' Click here '
}
},
}
I've tried lots of options for a while but haven't had any luck. Any help would be much appreciated. Thanks
You need to set pointerEvents property to 'auto':
tooltip: {
style: {
pointerEvents: 'auto'
}
}
Live demo: http://jsfiddle.net/BlackLabel/7nrvsp5y/
API Reference: https://api.highcharts.com/highcharts/tooltip.style
I am trying to create a jQuery plugin but I've run into numerous issues. Let me show you my code.
jQuery Plugin:
//This plugin was created by Ben Allen. Website: http://thebenallen.net/
//This plugin uses the OpenDyslexic font. Get it at: http://opendyslexic.org/
(function($) {
$.fn.dyslexicSupport = function( options ) {
var settings = $.extend({
//Defualt settings in case you break it.
//backgroundColor : 'white',
//backgroundColorActive : '#BDBDBD',
//color : 'black',
//colorActive : '#00143E',
//alert : false,
//fontStyle : 'normal'
backgroundColor : 'white',
backgroundColorActive : '#BDBDBD',
color : 'black',
colorActive : '#00143E',
alert : false,
fontStyle : 'normal'
}, options);
return this.each(function() {
$("head").prepend("<style type=\"text/css\">" +
"#font-face {\n" +
"\tfont-family: \"opendyslexic\";\n" +
"\tsrc: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Regular.otf');\n" +
"\tfont-weight: normal;\n" +
"\tfont-style: normal;\n" +
"}\n" +
"</style>");
$("head").prepend("<style type=\"text/css\">" +
"#font-face {\n" +
"\tfont-family: \"opendyslexic\";\n" +
"\tsrc: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Italic.ttf');\n" +
"\tfont-weight: normal;\n" +
"\tfont-style: italic;\n" +
"}\n" +
"</style>");
$("head").prepend("<style type=\"text/css\">" +
"#font-face {\n" +
"\tfont-family: \"opendyslexic\";\n" +
"\tsrc: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Bold.ttf');\n" +
"\tfont-weight: normal;\n" +
"\tfont-style: bold;\n" +
"}\n" +
"</style>");
$(this).css('font-family', 'opendyslexic')
//if(settings.fontStyle) {
$(this).css('font-style', settings.fontStyle);
//}
if(settings.color) {
$(this).css('color', color);
}
if(settings.backgroundColor) {
$(this).css('background-color', settings.backgroundColor);
}
$(this).mouseenter(function() {
if(settings.backgroundColorActive) {
$(this).css('background-color', settings.backgroundColorActive);
}
});
$(this).mouseleave(function() {
if(settings.backgroundColor) {
$(this).css('background-color', settings.backgroundColor);
}
});
$(this).mouseenter(function() {
if(settings.colorActive) {
$(this).css('color', settings.colorActive);
}
});
$(this).mouseleave(function() {
if(settings.color) {
$(this).css('color', settings.color);
}
});
if(settings.alert == true) {
$('document').ready(function() {
alert('This website is Dyslexia friendly.');
});
}
else {
return true;
}
$('#alertClose').click(function() {
$('#alertDiv').hide()
});
});
}
}(jQuery));
How I call it in the HTML:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="jquery.dyslexicSupport.js" type="text/javascript"></script>
<script type="text/javascript">
$('document').ready(function() {
$('body').dyslexicSupport({
backgroundColor : 'white',
backgroundColorActive : 'black',
color : 'red',
colorActive : 'blue',
alert : true,
fontStyle : 'italic'
});
});
</script>
</head>
Ok, so let me explain what issues I'm having. The parameters when I call it won't override the default ones set in the .js file. Another issue is most options won't work. The only one that does is the settings.fontStyle option. I probably have so much more errors that I can't think of. But if anybody knows whats going on that would be greatly appreciated. Thanks!
If you look at the console you will spot the error, which is at
if(settings.color) {
$(this).css('color', color);
}
It should be
if(settings.color) {
$(this).css('color', settings.color);
}
otherwise the error causes all the following code to fail
See the fixed demo
//This plugin was created by Ben Allen. Website: http://thebenallen.net/
//This plugin uses the OpenDyslexic font. Get it at: http://opendyslexic.org/
(function($) {
$("head").prepend("<style type=\"text/css\">" +
"#font-face {\n" +
"\tfont-family: \"opendyslexic\";\n" +
"\tsrc: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Regular.otf');\n" +
"\tfont-weight: normal;\n" +
"\tfont-style: normal;\n" +
"}\n" +
"</style>");
$("head").prepend("<style type=\"text/css\">" +
"#font-face {\n" +
"\tfont-family: \"opendyslexic\";\n" +
"\tsrc: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Italic.ttf');\n" +
"\tfont-weight: normal;\n" +
"\tfont-style: italic;\n" +
"}\n" +
"</style>");
$("head").prepend("<style type=\"text/css\">" +
"#font-face {\n" +
"\tfont-family: \"opendyslexic\";\n" +
"\tsrc: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Bold.ttf');\n" +
"\tfont-weight: normal;\n" +
"\tfont-style: bold;\n" +
"}\n" +
"</style>");
$.fn.dyslexicSupport = function(options) {
var settings = $.extend({
//Defualt settings in case you break it.
//backgroundColor : 'white',
//backgroundColorActive : '#BDBDBD',
//color : 'black',
//colorActive : '#00143E',
//alert : false,
//fontStyle : 'normal'
backgroundColor: 'white',
backgroundColorActive: '#BDBDBD',
color: 'black',
colorActive: '#00143E',
alert: false,
fontStyle: 'normal'
}, options);
return this.each(function() {
$(this).css('font-family', 'opendyslexic')
//if(settings.fontStyle) {
$(this).css('font-style', settings.fontStyle);
//}
if (settings.color) {
$(this).css('color', settings.color);
}
if (settings.backgroundColor) {
$(this).css('background-color', settings.backgroundColor);
}
$(this).mouseenter(function() {
if (settings.backgroundColorActive) {
$(this).css('background-color', settings.backgroundColorActive);
}
});
$(this).mouseleave(function() {
if (settings.backgroundColor) {
$(this).css('background-color', settings.backgroundColor);
}
});
$(this).mouseenter(function() {
if (settings.colorActive) {
$(this).css('color', settings.colorActive);
}
});
$(this).mouseleave(function() {
if (settings.color) {
$(this).css('color', settings.color);
}
});
if (settings.alert == true) {
$(document).ready(function() {
alert('This website is Dyslexia friendly.');
});
} else {
return true;
}
$('#alertClose').click(function() {
$('#alertDiv').hide()
});
});
}
}(jQuery));
$(document).ready(function() {
$('body').dyslexicSupport({
backgroundColor: 'white',
backgroundColorActive: 'black',
color: 'red',
colorActive: 'blue',
alert: true,
fontStyle: 'italic'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
How I call it in the HTML:
... most options won't work. The only one that does is the settings.fontStyle option. ...
That's because your default options and the ones you are sending to your plugin are the same except the fontStyle:
// Plugin settings
{
backgroundColor : 'white',
backgroundColorActive : '#BDBDBD',
color : 'black',
colorActive : '#00143E',
alert : false,
fontStyle : 'italic'
}
// Code settings
{
backgroundColor : 'white',
backgroundColorActive : '#BDBDBD',
color : 'black',
colorActive : '#00143E',
alert : true, // Only these two
fontStyle : 'normal' // are different!
}
Update:
$.extend() will amend the first object that is passed to it as an argument. So, you should be calling it like so:
var settings = {
backgroundColor : 'white',
backgroundColorActive : '#BDBDBD',
color : 'black',
colorActive : '#00143E',
alert : false,
fontStyle : 'normal'
};
$.extend(settings, options);
There are other issues with your code. For example: you are adding several styles into head for each element in the selector. Probably, you don't want to do that.
Helo,
It's possible showing the negative and positive series in the same diretion using highchart?
Like this:
expected result
Yes it is possible, But you need to fudge it. Make the label show negative, but use absolute value(always positive) of the figure.
After your comment and link to the code, I was able to find a solution that I think will work for you.
//tooltip function
function format_tt(inp) {
index = this.point.index;
var s = '<b>' + this.x + '</b>';
var point = this.point;
s += '<br/><span style="color:' + point.series.color + '">\u25CF</span>: ' + point.series.name + ': ' + tdata[index];
return s;
}
//Data
tdata = [20, -20];
//Rework the data to use only the positive values, but only for our graph. Wherever we need the true values, we reference tdata.
data = tdata.map(function(_) {
return Math.abs(_);
});
$(function() {
$('#container').highcharts({
chart: {
type: 'column'
},
legend: {
align: "center",
labelFormatter: function() {
var count = 0;
for (var i = 0; i < this.yData.length; i++) {
count += this.yData[i]; //change this to tdata[i] to get the true value;
}
return this.name + ' (' + count + ')';
},
y: 3
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
categories: ['Receitas', 'Despesas']
},
credits: {
enabled: false
},
series: [{
name: 'Receitas e despesas',
data: data //Our data, AFTER the conversion
}],
tooltip: {
formatter: format_tt //our tooltip function.
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
jsFiddle: http://jsfiddle.net/zb2edyLe/3/
tdata is now where you'd put your data. Not the original place, Please review the comments within the code as that explains what I've done.
The legend in my highcharts is not functioning correctly. I have 2 series, each named differently. When I click on 'series1' on the legend, the data for 'series1' is hidden leaving 'series2' behind. However, when I click on 'series2' first, all the data is hidden instead of only 'series2'. What are some common mistakes that could lead to this? Here is a snippet of the involved code:
EDIT: Here is a jsFiddle reproduction of my bug. You can see when you click on "Pool" in the legend both series are removed. Clicking on client, however, works as expected. https://jsfiddle.net/LLExL/5616/
EDIT2: I found the solution. Apparently if the first index of a given series of data is empty, the error occurs. It also appears that it must have the same number of elements equal to the index with the least amount of data points. So in my case, I check if the first element in clientChartData or poolChartData is empty, if so I append 5 pairs of quotes to that array.
$('#all-cpus').highcharts({
chart: {
type: 'boxplot',
inverted: true
},
title: {
text: 'All CPUs'
},
xAxis: {
title: { text: 'Hybrids' }
},
yAxis: {
title: { text: 'Yield' }
},
legend: { enabled: true },
credits: { enabled: false },
tooltip: {},
plotOptions: {
boxplot: {
fillColor: '#6c3a38',
lineWidth: 3,
medianWidth: 3,
stemColor: '#DF5353',
stemDashStyle: 'dot',
stemWidth: 1,
whiskerColor: '#AAEEEE',
whiskerLength: '20%',
whiskerWidth: 3
}
},
series: [
{ name: 'Client' },
{ name: 'Pool' }
]
});
Here is where I set the chart data. Assume organizedClientData as all the data I need.
//Set the data to be displayed on the chart
clientChartData = organizedClientData;
$chart.highcharts().series[0].setData(clientChartData, false);
$chart.highcharts().series[0].update({name: this.clientData.name}, false);
$chart.highcharts().series[1].setData(poolChartData, false);
$chart.highcharts().series[1].update({name: this.poolData.name}, false);
//Set tooltip info to reflect dynamic data and to include acres
$chart.highcharts().tooltip.options.formatter = function() {
var index = this.point.x;
var numAcresPool = poolAcres[ index ];
var numAcresClient = clientAcres[ index ];
var tooltipString = this.point.category + '<br>' +
this.point.series.name + '<br>' +
'Max: ' + this.point.high + '<br>' +
'Upper Quartile: ' + this.point.q3 + '<br>' +
'Median: ' + this.point.median + '<br>' +
'Lower Quartile: ' + this.point.q1 + '<br>' +
'Min: ' + this.point.low + '<br>';
//Handle client vs. pool acreage display, and check if on the 'All Cpus' tab
if(this.point.series.name == 'Pool') {
tooltipString = tooltipString + 'Acres: ' + numAcresPool;
}
else if(this.point.series.name == 'All Farms' /*&& $chart.selector != '#all-cpus'*/) {
tooltipString = tooltipString + 'Acres: ' + numAcresClient;
}
return tooltipString;
};
var xaxis = $chart.highcharts().xAxis[0];
var title = { text: this.getProfileData().cropId == 1 ? 'Hybrids' : 'Varieties' };
xaxis.setCategories(categories, true);
xaxis.setTitle(title, true);
$chart.highcharts().setSize( $chart.parent().width() - 15, $chart.highcharts().xAxis[0].categories.length * 50 + 150 );
$chart.highcharts().redraw();
This looks like a bug, I reported that to our developers here: https://github.com/highcharts/highcharts/issues/4939
I have the following question:
How can I customize the chart tooltip using Highcharts.js
library?
any help is appreciated.
If you want to customize the tooltip of your highcharts.js chart, you can do it defining a formatter
for the tooltip property of your chart_object, like this:
var chart_object = {
(...)
tooltip: {
formatter: function() {
return '<span>' + 'My HTML ' + this.x + '</span> : <b>' + this.y + '</b>';
}
},
(...)
}
You will use the chart_object later to initialize your Highcharts chart:
var chart = new Highcharts.Chart(chart_object );
I hope it helps.