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
Related
I'm working on a drilldown treemap and the render is exactly what I want.
My problem is about the legend.
I used colorAxis for the drilldown level and I would like to hide the legend on the main level (one color by tile) but display the graduate color axis legend on the sub level, only for the sub-serie displayed.
I made an example here : http://jsfiddle.net/vegaelce/4dLopjwv
I used the property legend to display it :
legend: {
enabled: true
},
but it displays the legend of each colorAxis on the sublevel.
How can I hide all the legend except the one corresponding to the sub-serie displayed ?
Thanks in advance
You can use drilldown and drillup events and update the visible property of the right color axis.
chart: {
type: 'treemap',
events: {
drilldown: function(e) {
const colorAxis = this.colorAxis[e.seriesOptions.colorAxis];
if (colorAxis) {
colorAxis.update({
visible: true
}, false);
}
},
drillup: function() {
this.colorAxis.forEach(function(cAxis){
if (cAxis.visible) {
cAxis.update({
visible: false
}, false);
}
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/vtg7fdn6/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#update
In the below chart is it possible to move the y axis label(africa) to the top left of the graph.
xAxis: {
categories: ['Africa'],
title: {
text: null
}
}
https://jsfiddle.net/wanp1bqg/2/
Output like the below
You can reposition the label in the render event, example:
events: {
render: function() {
this.xAxis[0].ticks[0].label.attr({
y: this.plotTop
});
}
}
Live demo: https://jsfiddle.net/BlackLabel/rcxg3unm/
API Reference:
https://api.highcharts.com/highcharts/chart.events.render
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
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
I'd like the cursor to be a crosshair when it is over the chart area of a highcharts graph, to indicate to users that they can zoom in. However, I don't want the cursor to be a crosshair when it's over other areas such as the legend or axes.
Is this possible?
You can use built-in method chart.isInsidePlot(plotX, plotY). Example: http://jsfiddle.net/2eje4xxb/1/
Code example:
container.on("mousemove", function (event) {
var chart = container.highcharts();
if (chart.isInsidePlot(event.pageX - chart.plotLeft, event.pageY - chart.plotTop)) {
$("body").css({
cursor: "crosshair"
});
} else {
$("body").css({
cursor: "default"
});
}
});
Another idea is to utilize chart.plotBackgroundColor option, which creates rect, which can obtain CSS styles:
chart: {
zoomType: 'x',
plotBackgroundColor: "rgba(10,0,0,0)", // dummy color, to create an element
events: {
load: function(){
if(this.plotBackground) {
this.plotBackground.toFront().css({ // move on top to get all events
cursor: "crosshair"
});
}
}
}
},
And demo: http://jsfiddle.net/2eje4xxb/2/
Yes it is possible. You can write code to set the cursor style in the mouse events.
Please find the jsfiddle here - http://jsfiddle.net/3Lu7bzmn/5/
CSS
.cursorCrossHair{
cursor : crosshair
}
.cursorDefault{
cursor : default
}
JS - Shown only specific piece of code which is required to change the cursor. The id of the div used to render the highcharts is called "container". Please refer the jsfiddle to see the full working example.
$('#container').highcharts({
chart: {
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
$("#container").removeClass("cursorDefault").addClass("cursorCrossHair");
},
mouseOut: function () {
$("#container").removeClass("cursorCrossHair").addClass("cursorDefault");
}
}
}
}
},
});
});
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.