I want to create charts with fixed height, depending on user interaction, some chart can be empty, so there are no legend.
My problem is I want all of them with the same height, and then, if there is legend it's above the chart, this height should be increased by the legend.
I can't get it, it's my try.
options = {
chart: {
zoomType: 'x',
height: 300
},
legend: {
enabled: 'true',
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal',
maxHeight: 50
}
};
As result, what I have is, if there is legend, a 250px chart and if it's not a 300px chart. What I want is always a 300px chart, and if legend, 50px more to contain it.
how can I solve it?
In the chart load event you can use the chart.setSize method to increase the height of the chart by the height of the legend.
function addLegendHeight(chart) {
var legendSpace = chart.legend.legendHeight -
chart.legend.padding;
if (legendSpace) {
chart.setSize(null, chart.chartHeight + legendSpace);
}
}
Highcharts.chart('container', {
chart: {
...,
events: {
load: function() {
addLegendHeight(this);
}
}
},
...
});
Live demo: http://jsfiddle.net/BlackLabel/seqah1by/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#setSize
Related
I am trying to do center align the title text of the pie chart Highchart. Was able to achieve that but on mouse hover, and mouse out the title data doesn't get updated. Anyone can help me with the same.
On MouseHOver trying to do the below mentioned code
point: {
events: {
mouseOver: function() {
let span = '<span style="color:${this.color}" class="dealer-title">${this.y}<br/> <span style="color:#33383e;}" class="text-truncate" title="${this.name}"><b> </b></span></span>';
$('.customTitle')[0].innerHTML = span
}
}
}
}
},
fiddle attached:
https://jsfiddle.net/5sutmqv3/1/
You need to enable useHTML argument in the text method call:
chart: {
type: 'pie',
events: {
load: function() {
...
var text = rend.text("textTexttext", left, top, true).attr({
'text-anchor': 'middle',
align: 'center',
'zIndex': 10
}).addClass('customTitle').add();
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/w5a2jpk7/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
It looks like you can't include html tags in the title. If you remove the SPANs it'll display the values.
$('.customTitle')[0].innerHTML = this.y
How can I show labels for each bar in Highcharts as shown in the image below?
I think the solution you are looking is some thing like this.
This canbe achieved using the datalabels and placing them properly at the position you have desired to.
plotOptions: {
column: {
dataLabels: {
enabled: true,
y: 0,
verticalAlign: 'bottom',
inside: true,
color: 'white',
formatter: function(e) {
return this.series.name
}
}
}
},
You can set overflow to 'none' and crop to false to be able to display data labels out of the area plot.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.crop
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.overflow
Example:
http://jsfiddle.net/5m0kkbhf/
I'm doing some highcharts and I use 40×40 images as the legend labels. However, the legend symbols are vertically top-aligned. (fiddle)
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical',
labelFormatter: function () {
return $('<div>').append($('<img>').attr('src', 'http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png').css({
height: 40,
width: 40
})).html();
},
useHTML: true
}
Is there some easy way to vertically center-align the legend symbols?
You can wrap positionItem function, to post-translate items to be in the middle: http://jsfiddle.net/6fgMp/3/
(function(H){
H.wrap(H.Legend.prototype, 'positionItem', function(proceed, item){
proceed.call(this, item);
if(item.legendSymbol) {
item.legendSymbol.translate(0, 10);
}
if(item.legendLine){
item.legendLine.translate(0, 10);
}
});
})(Highcharts);
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.
I took a sample jsfiddle and modified it here just to show a sample of what I experienced:
http://jsfiddle.net/pMwuv/
Here is what my actual datalabel code looks like:
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
color: 'black'
},
formatter: function () {
if (this.x == 19) {
return this.y + '<br>units left';
};
}
}
What I am having on my area chart is that the last data label is cut off. Is there a way to increase the width of the container or add some type of padding so that the full label shows?
Just changing the x and y position of the label will not work for my area chart. I have my chart customized so that only the last point of the chart has a data label and i want it aligned to the right of the last point and not within the chart.
But if we can get the above sample fiddle to work then the same solution should work for me.
You can add marginRight to chart like this:
chart: {
renderTo: container,
width: 550,
marginRight: 35
}
jsFiddle.
This is not a direct solution, but I suggest you to put the label at the yAxis:
yAxis: {
title: {
text: 'Units left'
}
},
And remove the other attributes, leaving just enabled: true:
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
},
See the fiddle
You can set spacingRight and add correct value.