I would like to make tooltip in Highstock styled differently(not just style of content, but style for tooltip itself. For example, different padding, shadow, border radious etc) when hovering over flag series and line serieses. However, it looks like these properties needs to be configured in the tooltip configuration object. Not sure if it can be dynamically changed.
Like in this jsbin:
http://jsbin.com/cixowuloxa/1/edit?js,output
What's the better way to give 'Summer arrives' tooltip different style than other shared tooltips?
Your approach is correct. In the formatter callback wrap the text in the html tags and style it using css, inline or by class name, depending if it is a flag or line series. Make sure you set useHTML to true.
tooltip: {
useHTML:true,
borderWidth: 0,
headerFormat: '',
shared: true,
formatter: function(){
if (!!this.points) {
return this.points
.reduce(
function(prev, cur) {
return prev +
'<br>' + cur.series.name + ': '+ cur.y;
}, '');
}
return "<div style='border:5px solid black; padding: 20px'>Summer arrives!</div>";
},
padding: 0
}
example: https://jsfiddle.net/hpeq7Lbe/1/
Actually, you can set different options for flag's and line's tooltip, but not all the options are supported, e.g. padding or border width will not work - they have to be set in the tooltip's global options.
plotOptions: {
line: {
tooltip: {
pointFormat: 'line',
borderWidth: 10, // not supported
padding: 10 // not supported
}
},
flags: {
tooltip: {
pointFormat: 'flags',
borderWidth: 1, //not supported
padding: 1 // not supported
}
}
}
example: https://jsfiddle.net/hpeq7Lbe/3/
Related
I have a simple line chart with a legend aligned to the right. Legend width is set based on the legend item content, if the content doesn't exceed 25% of the width of the chart, it stays as it is. But if it exceeds - 25% is applied. The code for this is here.
The problem is that I am facing a situation when legend text has long string without white spaces in between - like PricewaterhouseCooper, the text gets cutoff - which is expected result based on the code. However I wanted to eliminate this scenario and let it exceed 25% if there is a string which width is wider than 25%. Do you have suggestion how better approach this problem?
Thanks!
My suggestion is using custom legend HTML to use custom styling for it. Highchart can be very strong at custom style for your chart.
I created this Fiddle for an example of it.
In my example, I used "min-width" and "max-width" based on percent of your container width. Also different "font-family" can cause a different results.
<script src="https://code.highcharts.com/highcharts.js"></script>
<style>#import 'https://code.highcharts.com/css/highcharts.css';
#container {
min-width: 300px;
max-width: 500px;
height: 300px;
margin: 1em auto;
}
</style>
<div id="container"></div>
<script>
Highcharts.chart('container', {
chart: {
styledMode: true,
events: {
load: function() {
var chart = this,
legend = chart.legend,
legendMaxWidth =
Highcharts.relativeLength(legend.options.maxWidth, 1) * chart.chartWidth;
/*if (legend.legendWidth > legendMaxWidth) {
legend.update({
width: legend.options.maxWidth
});
}*/
}
}
},
legend: {
align: 'right',
layout: 'proximate',
maxWidth: '25%',
width: '25%',
/* use custom html */
useHTML: true,
labelFormatter: function () {
return '<span title="' + this.name + '" style="max-width:110px;min-width:75px;display:block;word-wrap: break-word;white-space: normal;letter-spacing: 0.5px;">' + this.name + '</span>';
}
},
series: [{
name: 'PricewaterhouseCoopers',
data: [1, 4, 3, 5],
},{
name: 'Pricewaterhouse Coopers copy',
data: [2, 1, 0, 3],
},
{
name: 'Deloitteverylongtexthere',
data: [3, 5, 3, 1],
}
]
});
</script>
I'm creating new variablepie highchart js. In that graph how to reduce space(height) of tooltip box. I need to reduce top and bottom space inside the tooltip box.
URL: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/variable-radius-pie
tooltip: {
headerFormat: '',
pointFormat: ' <b>COMPANY</b><br/>' +
'Match Percent: <b>{point.y}</b><br/>' +
'Score Weight: <b>{point.z}</b><br/>',
valueSuffix: ' %',
useHTML: true,
outside: true,
style: {
padding: 0
},
followPointer:true
},
You need to set the padding directly in a tooltip configuration object:
tooltip: {
padding: 0,
...
}
Live demo: https://jsfiddle.net/BlackLabel/eom8tqns/
API Reference: https://api.highcharts.com/highcharts/tooltip.padding
But the main thing is, it will only support numbers not px values
I have a chart drawn using Highcharts API, which has two series and multiple levels of data shown using DrillDown feature of the API. When i tend to modify the default Axis label format using formatting property and by setting useHTML 'true', the labels are displayed with underline even in the last level which is not the expected behaviour.
xAxis: {
type: 'category',
labels: {
rotation: -45,
formatter: function (e) {
return '<div class="chartXAxisLabel" title="' + this.value + '" ><span>' + this.value + '</span></div>';
},
useHTML: true
},
title: {
enabled: true,
align: 'high'
}
},
The issue could be seen in the below fiddle link.
http://jsfiddle.net/6LXVQ/418/
I find it odd that only adding/removing useHTML: true causes this problem by itself. The formatter does not need to be involved (as shown in this minimal example).
I found that adding this minimal code fixes the problem (JSFiddle example with your code):
xAxis: {
labels: {
useHTML: true,
style: {
"text-decoration": "none"
}
}
}
I'm not exactly sure why, but it removes the underline from the span element that is causing it.
I want to make some tooltips visible in my d3 map. The tooltips are column charts generated by Highcharts regarding the chosen city. The trick is that everything is displaying correctly (axis, labels ...) except that the columns are not visible!
Here my d3 code (only the relevant parts):
var tooltip = d3.select("body")
.append("div")
.attr("id","tooltip")
.style("position", "absolute")
.style("visibility", "hidden");
cities.on("mouseover", function(d, i) {
d3.select(this).style('fill', '#95a5a6');
tooltip.html(zoomCityComm(d))
return tooltip.style("visibility", "visible")})
.on("mousemove", function(d, i){
return tooltip.style("top", (d3.event.pageY - 130) + "px").style("left",(d3.event.pageX - 120) + "px");
})
}
The function zoomCityComm is HighCharts (example of data: [5,10]):
function zoomCityComm(d) {
chart = new Highcharts.Chart({
chart : {
renderTo: 'tooltip',
type: 'column',
width:200,
height:200,
plotBackgroundColor: '#FCFFC5',
zoomType: 'xy'
},
title: {
text: "TOTO"
},
legend: {
enabled: false
},
xAxis: {
categories: ['In','Out']
},
yAxis: {
title: {
text: 'Sum',
style: {
color: '#4572A7'
}
},
labels: {
style: {
color: '#4572A7'
}
},
},
series:[{color: '#4572A7',data: res}]
});
return document.getElementById("tooltip").innerHTML;
}
When the graph is displayed in a "normal" div within the document, it appears correctly.
Sorry if my explanations are not clear but ask me for some details if needed.
Thanks
Cyril
You're setting the HTML content of the div twice, as highcharts renders it itself. In your mouseover handler function, it is enough to do
zoomCityComm(d);
instead of
tooltip.html(zoomCityComm(d));
For the interested, here's what's happening. Setting the HTML of the tooltip div from the return value of the function captures the first animation frame that highchart uses to grow the bars. As it is the first frame, the height of the bars is still 0 -- that is, the bars are there, but not visible because they have essentially no height. Replacing the HTML of the div means that the animation won't work anymore, as the elements that would be animated have been replaced.
Is there way to set the label of an Bar Chart to 50% of the charts width? I've tried this but it does not work:
xAxis: {
categories: [],
labels: {
formatter: function() {
var text = this.value;
return '<div class="js-ellipse" style="width:100%; overflow:hidden; text-overflow: ellipsis" title="' + text + '">' + text + '</div>';
},
style: {
width: '50%'
},
useHTML: true
}
},
So goal is to have labels on the left side of the bar chart that are 50% of the width of the whole chart container.
You have an option for that in the plotOptions :
plotOptions: {
bar: {
dataLabels: {
enabled: true,
inside: true
// ^^^^^^^^^^^^
}
}
},
The property inside :
For points with an extent, like columns, whether to align the data label inside the box or to the actual value point. Defaults to false in most cases, true in stacked columns.
And an example forked from the official documentation : http://jsfiddle.net/XXB9k/
EDIT :
There is another option to center the x labels (I don't know witch labels your are talking about), but there is a solution not far away from your code :
xAxis: {
...
labels: {
enabled: true,
x: this.width / 2,
}
}
An example : http://jsfiddle.net/QMPkh/
FINAL EDIT :
In fact you can simply use the width of the chart in the label formatter :
labels: {
enabled: true,
formatter: function() {
return '<div style="width:' + (this.axis.width/2) +'px">'+this.value+'</div>';
},
useHTML: true
}
An example to show the result : http://jsfiddle.net/QMPkh/2/
Unfortunately width in percent is not supported, only in pixels.