Hiding axis labels in non-aggregate columns during drillown - highcharts

How do I manipulate the x-axis style on a drilled down chart in Highcharts?
For instance, given the following drilldown chart, how do I hide the x-axis labels in the drilled down version of the chart (that appears when you click one of the columns)?
In general, it seems like there are are not a lot of ways to control the layout of the drilled down chart, is that correct?
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Drilldown mechanism in Highcharts is responsible only for handling series, but it launches drilldown and dillup events which can be used for applying updates:
chart: {
type: 'column',
events: {
drilldown: function() {
this.xAxis[0].update({
labels: {
enabled: false
}
});
},
drillup: function() {
this.xAxis[0].update({
labels: {
enabled: true
}
}, false);
}
}
}
Live demo: http://jsfiddle.net/kkulig/11qhaffe/
API references:
https://api.highcharts.com/highcharts/chart.events.drilldown
https://api.highcharts.com/highcharts/chart.events.drillup

Related

How to add the text boxes at bottom of the Highchart?

I have a sample highchart and I want to add the five text boxes with different colors at the bottom of the chart.
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: [{
name: 'Excellent',
data: [5, 3, 4, 1, 2]
}, {
name: 'Poor',
data: [2, 2, 9, 2, 1]
},
{
name: 'Fair',
data: [5, 3, 1, 7, 2]
}, {
name: 'Good',
data: [2, 2, 3, 6, 1]
}, {
name: 'Very good',
data: [3, 4, 8, 2, 5]
} ]
});
You can use the annotations module to add the text boxes:
annotations: [{
labelOptions: {
y: 0,
overflow: 'none',
shape: 'rect'
},
labels: [{
point: {
x: 50,
y: 280
},
backgroundColor: 'red',
text: 'some text'
}, {
point: {
x: 250,
y: 280
},
backgroundColor: 'blue',
text: 'some text'
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/4h0gp2qz/
API Reference: https://api.highcharts.com/highstock/annotations

highcharts x-axis not showing with series of just one value

I use highcharts for a chart. I made series with "linkedTo" because I need to group the columns by region and generate a legend displaying these regions. Until then, the result is the desired one. But I can not display the name of my categories on the X axis. Under each column there should be "A", "B", ... As in the picture. See the jsfiddle for the code. Thank you for your help.
http://jsfiddle.net/yucca/hpkLy6t0/24/
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'TEST'
},
subtitle: {
text: 'TEST'
},
xAxis: {
type: 'category',
categories: ['A', 'B', 'C', 'D']
},
legend: {
enabled: true,
labelFormatter: function() {
return this.userOptions.id
}
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: false,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [
{
id:'China',
color: '#004f9e',
data: [1100]
},
{
id:'International',
color: '#e73357',
data: [10]
},
{
linkedTo: 'International',
color: '#e73357',
data: [1000]
},
{
linkedTo: 'China',
color: '#004f9e',
data: [686]
}
]
});
graph
You need to make a slight alteration to your series in order for this to work.
series: [{
data: [{
id:'China',
color: '#004f9e',
y: 1100
},{
id:'International',
color: '#e73357',
y: 10
},{
linkedTo: 'International',
color: '#e73357',
y: 1000
},{
linkedTo: 'China',
color: '#004f9e',
y: 686
}],
}]
What I did is the following:
I changed the data[] so it holds an array of your values.
I changed the values stored as data: [686] to y: 686
Here you can find a working JSFiddle

Highcharts - how to do a responsive pie chart when the texts of the labels are long

I need to do a responsive pie chart with a drilldown on the green area. The text of the labels are too long so in mobile devices it appears like this:
As you can see the texts are cut.
How can I make these texts appear fully in responsive. Please find code below. TIA
Highcharts.chart('recoveryGraf', {
chart: {
type: 'pie'
},
title: {
text: ''
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
colors: ['#005eb8','#56b6cc','#8bc540'],
data: [{
name: 'Potential for further recovery',
y: 6,
drilldown: null
}, {
name: 'Non-recoverable<br>(e.g. tissue,wallpaper,etc)',
y: 22,
drilldown: null
}, {
name: 'Recycled',
y: 72,
drilldown: 'Recycleds'
}]
}],
drilldown: {
series: [{
name: 'Recycleds',
id: 'Recycleds',
colors: ['#57a133','#8bc540'],
data: [
['Exported', 16],
['Used Europe', 84]
]
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="recoveryGraf"></div>
...
responsive: {
rules: [{
condition: {
maxWidth: 300
},
chartOptions: {
plotOptions: {
pie: {
dataLabels: {
enabled: false
// add your costume code here
}
}
}
}
}]
}

Highcharts multi-level drilldown with scroll bar only draw partial of the columns

I need to draw a chart with multi-level drilldowns. Because each level has different number of columns, I will update max of x-axis inside drilldown/drillup events. Then I noticed, some drilldown graph are messed up. The bar only draw the top parts. For example, y=3068. The graph only draws from 1500 to 3068.The bottom part is cut off.
$(function () {
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
load: function (e) {
this.xAxis[0].update({ max: 5 });
},
drilldown: function (e) {
this.xAxis[0].update({ min: 0 });
this.yAxis[0].update({ min: 0 });
if (e.seriesOptions.data.length > 14)
this.xAxis[0].update({ max: 15 });
else {
this.xAxis[0].update({ max: e.seriesOptions.data.length - 1 });
}
},
drillup: function (e) {
this.xAxis[0].update({ min: 0 });
this.yAxis[0].update({ min: 0 });
if (e.seriesOptions.data.length > 14)
this.xAxis[0].update({ max: 15 });
else {
this.xAxis[0].update({ max: e.seriesOptions.data.length - 1 });
}
}
}
},
title: {
text: 'Basic drilldown'
},
scrollbar: {
enabled: true
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Daily Data',
colorByPoint: true,
data: [{
name: '11/14/2016',
y: 5850,
drilldown: '11/14/2016'
}
]
}],
drilldown: {
series: [{
id: '11/14/2016',
data: [
{name: 'Customer Advocacy',
y: 8,
drilldown: 'Customer Advocacy0'},
{name: 'General Information',
y: 3068,
drilldown: 'General Information0'},
{name: 'Surcharge',
y: 98,
drilldown: 'Surcharge0'},
{name: 'Suspension And Restoration',
y: 2676,
drilldown: 'Suspension And Restoration0'}
]
}, {
id: 'Customer Advocacy0',
data: [
['Belinda Arduini',2],
['Deann Avery',2],
['Michele Rahilly',3],
['Tonia Lacey',1]
]
}, {
id: 'General Information0',
data: [
['Alicia Richardson',44],
['Angela Gash',86],
['Angela Migliaccio',125],
['Ashonti Sweat',178],
['Ayesha Walker',119],
['Brandon Steen',76],
['Charesse Yarbrough',101],
['Denise Davis',2],
['Dominicia Brown',65],
['Eldora Thompson',105],
['Essie Davis',2],
['Isa Martinez',17],
['Joanne Hendricks',102],
['Kenyell Kelley',149],
['Kiara Watkins',93],
['Kimberly Barlow',109],
['Lee Palma',30],
['Leslie Caceros',155],
['Lisa Fischer',184],
['Lisa Poliziana',139],
['Malisa Stanisclaus',116],
['Michael Carlisi',145],
['Miguel Rivera',85],
['Natacha Perez-Mendez',130],
['Patricia Bell',119],
['Sandra Buchanan',99],
['Sharae Donalson',140],
['Shawn Gribbin',120],
['Tara Damico',233]
]
},
{
id: 'Surcharge0',
name: '11/14/2016:Surcharge',
data: [
['Ernestine Bunche',17],
['Janice Avent',17],
['Sabrina Moses',20],
['Veronica Gibson',44]
]
},
{
id: 'Suspension And Restoration0',
name: '11/14/2016:Suspension And Restoration',
data: [
['Angel Deleon',95],
['Catherine Lynch',81],
['Colby Tobin',212],
['Coreena Contreras',158],
['Crystal Marshall',83],
['Dane Powell',144],
['Darrell Jones',98],
['Denise Campi',166],
['Denise Manners',32],
['Diane Koval',114],
['Eugenia Kostis',24],
['Jeanne Cheeseman',136],
['Jennifer Hiel',167],
['Jennifer Rodriguez',102],
['Lasonda Swinney',83],
['Latina Mason',53],
['Sherry Tartaglia',254],
['Susan Pasteur',43],
['Tomeka Ramocan',49],
['Tracey Green',155],
['Tracy Paulin',111],
['Tricia Palazzone',86],
['Ursula Covington',55],
['Virginia Dardis',175]
]
}]
}
});
});

How to enable the vertical scrollbar in Highcharts?

Here is my following chart config. I have been doing some research but couldn't find any help to enabling vertical scrollbar.
I know that I can set overflow-y property for chart container div, but to achieve frozen X-axis I need vertical scroll on series that is not container.
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['CITY1', 'CITY2','CITY3','CITY4'],
minorTickLength: 0,
tickLength: 0,
lineWidth: 0,
tickwidth: 0,
},
yAxis: {
max: 100,
tickInterval: 25,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
grouping: false,
stacking: 'normal'
}
},
scrollbar: {
enabled: true
},
series: [{
name: 'Q1',
data: [50, 70,0,35]
},{
name: 'Q2',
data: [20, 0,50,0]
},{
name: 'Q3',
data: [0, 0,40,20]
},{
name: 'Q4',
data: [0, 30,0,20]
}]
});
});
Can anybody suggest me how to enable the vertical scrollbar in Highcharts?
#Swetha: That fiddle is using Highstock library. Highcharts does not support scrollbars. Scrollbars are Highstock only
http://www.highcharts.com/docs/chart-concepts/scrollbar
You could set a fixed height or width to the chart and wrap into a div width overflow-x:auto, it's not the same but it is something at least.
Try this fiddle: http://jsfiddle.net/fj6d2/3076/
This may help you.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type:'bar',
},
xAxis: {
categories: ['CITY1', 'CITY2','CITY3','CITY4'],
min:2,
},
yAxis: {
title: {
text: 'Total fruit consumption'
},
},
plotOptions: {
series: {
grouping: false,
stacking: 'normal'
}
},
legend: {
verticalAlign: 'top',
y: 100,
align: 'right'
},
scrollbar: {
enabled: true
},
series: [{
name: 'Q1',
data: [50, 70,0,35]
}, {
name: 'Q2',
data: [20, 0,50,0]
}, {
name: 'Q3',
data: [0, 0,40,20]
},{
name: 'Q4',
data: [0, 30,0,20]
}]
});

Resources