Highchart inner chart bars are break after trying 2-3 times drill up and drill down.
My first chart in donut chart and then inner chart is bar chart.
So, I need to show legend and hide title in pie chart (First) and then want to remove legend and show title in drill down - bar chart (Second).
var options = {
chart: {
type: 'column',
renderTo: div,
backgroundColor: '#191919',
events: {
drilldown: function(e) {
this.yAxis[0].setTitle({
text: 'Total'
});
},
drillup: function(e) {
this.yAxis[0].setTitle({text: ''});
}
}
},
}
The issue is shown in the below image:
It looks like the bug occurs when you have used the Highstock script rather than Highcharts. While using the Highcharts script everything works fine.
<script src="https://code.highcharts.com/highcharts.js"></script>
Demo: https://jsfiddle.net/BlackLabel/4eus1x5t/
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
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
For example:
https://jsfiddle.net/zvj2nmyk/
Highcharts.chart('container', {
chart: {
polar: true,
type: 'line'
},
title: {
text:null // Already hide this but still occupy a lot of space at the top of my chart
},
...
}
In this code I have removed the title part of the chart but the chart is still having a lot of blank space at the top.
How do I remove the top space?
Thanks,
The blank space isn't from the title but from pane and legend. This options will change the render:
pane: {
// size: '60%'
},
legend: {
enabled:false,
},
Fiddle
I'm working on a PieChart of HighChart to show my user count status.
In the below chart, when I hover on the red color chart slice, then the cursor: pointer needs to enable.
If I hover on the green color chart slice, then I need to disable the cursor totally or set cursor: default.
Can anyone help me to do this?
On a load event you need to set point's cursor to pointer.
Highcharts.chart('container', {
chart: {
type: 'pie',
events: {
load: function () {
this.series[0].data[0].graphic.attr({
cursor: 'pointer'
});
}
}
},
series: [{
data: [90, 10]
}]
});
example: http://jsfiddle.net/zwwsz2kz/
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.