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
Related
I build a drillable heatmap with Highchart. It's working well but I need to enhance the capabilities of drilldown on it.
You can see the demo here : https://jsfiddle.net/vegaelce/7wc6t2ex/
I would like to be able to drill on the Y Axis and on the X Axis on specific series.
In the example, by clicking on "California" axis label, I would like the chart drill on 'California_years' drilldown serie.
In the same way, I'd like to be able to click on X-Axis, in the example, by clicking on '2015' label value, the chart would drill to 'States_2015' drilldown serie.
Notice that I use axe_x and axe_y values in each serie to change the axis of the chart on drilldown/drillup event :
events:{
drilldown: function(e) {
var chart = this;
chart.yAxis[0].update({
type: 'category',
categories: y_axes[e.seriesOptions.axe_y]
});
chart.xAxis[0].update({
type: 'category',
categories: x_axes[e.seriesOptions.axe_x]
});
},
drillup: function(e) {
var chart = this;
chart.yAxis[0].update({
type: 'category',
categories: y_axes[e.seriesOptions.axe_y]
});
chart.xAxis[0].update({
type: 'category',
categories: x_axes[e.seriesOptions.axe_x]
});
}
}
How can I achieve these features ?
Thanks
You can check if e.category is defined, if it is, the drilldown was triggered by clicking on axis label. Next, you need to only bind the category with proper drilldown options. For example:
chart: {
type: 'heatmap',
events: {
drilldown: function(e) {
if (typeof e.category !== 'undefined') {
if (e.category === 0) {
e.seriesOptions = this.options.drilldown.series[3];
} else if (e.category === 3) {
e.seriesOptions = this.options.drilldown.series[2]
}
}
var chart = this;
chart.yAxis[0].update({
type: 'category',
categories: y_axes[e.seriesOptions.axe_y]
});
chart.xAxis[0].update({
type: 'category',
categories: x_axes[e.seriesOptions.axe_x]
});
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/186mdyfx/
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
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/
I have a chart with multiple data series. How do I change it so that when I click on the legend it hides all other data points and only shows the data series I clicked on?
Many thanks
Return false from the legendItemClick event callback function to prevent the default legend behaviour and use hide and show methods on the relevant series.
plotOptions: {
series: {
events: {
legendItemClick: function() {
this.chart.series.forEach(s => {
s !== this ? s.hide() : s.show()
}, this);
return false;
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/tzLbxr20/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.series.events.legendItemClick
https://api.highcharts.com/class-reference/Highcharts.Series#show
https://api.highcharts.com/class-reference/Highcharts.Series#hide
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