Related
Highcharts Basic Line chart, Y-axis label how need to show ?
Here is my code
var seriesData = [["O", 42], ["N", 35], ["D", 20], ["J", 47], ["F", 45], ["M", 65]];
var seriesDataY = [['O', 50], ['14', 22], ["D", 30], ["J", 42], ["F", 44], ["M", 65]];
Highcharts.chart('linechart', {
title: {
text: ' '
},
yAxis: {
title: {
text: '(6 mth period)'
},
labels: {
enabled: true,
formatter: function () { return seriesDataY[0][this.value]; },
}
},
xAxis: {
tickInterval: 1,
labels: {
enabled: true,
formatter: function () { return seriesData[this.value][0]; },
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 0
}
},
series: [{
name: 'Voluntary',
data: seriesData
}, {
name: 'Involuntary',
data: seriesDataY
//data: [null, null, 7988, 12169, 15112, 22452]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
Images attached:
Y-axis label is missing:
0, 14 , 28,42, 56,70
As per the above value, i need to show the Y-axis. What is the option to show the Y-axis label name?
Notice that yAxis takes values (this.value) from the data y numbers. That's why it is different than for xAxis. Also, notice that the amount of the labels for yAxis is calculated differently, so it has to be set.
I think that something like this should fit your requirements:
let i = 0;
Highcharts.chart('container', {
title: {
text: ' '
},
...
labels: {
enabled: true,
formatter: function() {
i++;
return seriesDataY[i - 1][0];
},
}
...
Demo: https://jsfiddle.net/BlackLabel/zsou1Lye/
I adapted the highcharts population pyramid (https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bar-negative-stack/) as follows:
I omitted the option "categories", instead used the option "type: 'category'" and added the categories to the data series. I want to do this because the data comes as a tuple from a file. Unfortunately, the right-hand x-axis is not labeled correctly. I want the right hand x-axis labeled same as the left one. Is this possible without using the option "categories"?
Here is the jsfiddle: https://jsfiddle.net/nehqb9k4/
chart : {
renderTo: 'container',
type: 'bar',
height: 480,
},
xAxis : [{
type: 'category',
reversed: false,
}, { // mirror axis on right side
type: 'category',
opposite: true,
linkedTo: 0,
reversed: false,
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Male',
data: [
['0-4', -2.2],
['5-9', -2.1],
['10-14', -2.2],
['15-19', -2.4],
['20-24', -2.7],
['25-29', -3.0],
['30-34', -3.3],
['35-39', -3.2],
['40-44', -2.9],
['45-49', -3.5],
['50-54', -4.4],
['55-59', -4.1],
['60-64', -3.4],
['65-69', -2.7],
['70-74', -2.3],
['75-79', -2.2],
['80-84', -1.6],
['85-89', -0.6],
['90-94', -0.3],
['95-99', -0.0],
['100 +', -0.0]
]
}, {
name: 'Female',
data: [
['0-4', 2.1],
['5-9', 2.0],
['10-14', 2.1],
['15-19', 2.3],
['20-24', 2.6],
['25-29', 2.9],
['30-34', 3.2],
['35-39', 3.1],
['40-44', 2.9],
['45-49', 3.4],
['50-54', 4.3],
['55-59', 4.0],
['60-64', 3.5],
['65-69', 2.9],
['70-74', 2.5],
['75-79', 2.7],
['80-84', 2.2],
['85-89', 1.1],
['90-94', 0.6],
['95-99', 0.2],
['100 +', 0.0]
]
}]
You need to set the right xAxis for the second series:
series: [{
// xAxis: 0 by default
name: 'Male',
data: [
...
]
}, {
name: 'Female',
xAxis: 1,
data: [
...
]
}]
Live demo: https://jsfiddle.net/BlackLabel/70yv1Lae/
API: https://api.highcharts.com/highcharts/series.bar.xAxis
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
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]
]
}]
}
});
});
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]
}]
});