Related
I want to have highchart drilldown with more than 3 levels.
Also, I have tried referring below articles, but I was not able to figure out.
Drilldown multiple levels Highchart
Highcharts - drill down to multiple series
I could do only till 3 levels. After that, bar is not clickable.
Not sure where the mistake is, but this is what I have done so far.
2 Level Drill down - Works fine
Multilevel - Works only till Month level, cannot filter Day level
https://jsfiddle.net/foodiepanda/2ec7d6fz/9/
Below is code (only jquery)
/*Start*/
$('#chart1').highcharts({
chart: {type: 'column'},
title: {text: 'Multi Drilldown'},
xAxis: {type: 'category'},
legend: {enabled: false},
plotOptions:
{
series:
{
dataLabels:
{
enabled: true, //Shown at top of column
}
}
},
series:
[
{
name: 'Year',
//colorByPoint: false,
data:
[
{name: '2019',y: 200,drilldown: '2019'}, //200 clicks in 2018
{name: '2020',y: 450,drilldown: '2020'}, //450 clicks in 2019
]
}
],
drilldown:
{
series:
[
{
id: '2019', //For 2019
name: 'Quarter', //Splitting 200 as 50,100,20,30
data:
[
{
name: 'Q1',
y: 50,
drilldown: 'Q1'
},
{
name: 'Q2',
y: 100,
drilldown: 'Q2'
},
{
name: 'Q3',
y: 20,
drilldown: 'Q3'
},
{
name: 'Q4',
y: 30,
drilldown: 'Q4'
}
]
},
{
id: 'Q1',
name: 'Month', //Splitting 50 as 10,30,20
data:
[
{
name: 'Jan',
y: 10,
drilldown: 'Jan'
},
{
name: 'Feb',
y: 30,
drilldown: 'Feb'
},
{
name: 'Mar',
y: 20,
drilldown: 'Mar'
}
]
},
{
id: 'Jan',
name: 'Day', //Splitting 10 as ...[days]
data:
[
{name:'1', y: 0},
{name:'2', y: 0},
{name:'3', y: 2},
{name:'4', y: 0},
{name:'5', y: 0},
{name:'6', y: 0},
{name:'7', y: 0},
{name:'8', y: 0},
{name:'9', y: 0},
{name:'10', y: 0},
{name:'11', y: 1},
{name:'12', y: 2},
{name:'13', y: 0},
{name:'14', y: 1},
{name:'15', y: 0},
{name:'16', y: 0},
{name:'17', y: 0},
{name:'18', y: 0},
{name:'19', y: 0},
{name:'20', y: 0},
{name:'21', y: 0},
{name:'22', y: 0},
{name:'23', y: 0},
{name:'24', y: 0},
{name:'25', y: 2},
{name:'26', y: 0},
{name:'27', y: 0},
{name:'28', y: 0},
{name:'29', y: 0},
{name:'30', y: 1},
{name:'31', y: 1}
]
},
{
id: 'Q2',
name: 'Month', //Splitting 100 as 80,10,10
data:
[
['Apr', 80],
['May', 10],
['Jun', 10]
]
},
{
id: 'Q3',
name: 'Month', //Splitting 20 as 5,10,5
data:
[
['Jul', 5],
['Aug', 10],
['Sep', 5]
]
},
{
id: 'Q4',
name: 'Month', //Splitting 30 as 5,15,10
data:
[
['Oct', 5],
['Nov', 15],
['Dec', 10]
]
},
//For 2020
{
id: '2020',
name: 'Quarter', //Splitting 450 as 50,100,50,250
data:
[
{
name: 'Q1',
y: 50,
drilldown: 'Q1'
},
{
name: 'Q2',
y: 100,
drilldown: 'Q2'
},
{
name: 'Q3',
y: 50,
drilldown: 'Q3'
},
{
name: 'Q4',
y: 250,
drilldown: 'Q4'
}
]
},
{
id: 'Q1',
name: 'Month', //Splitting 50 as 10,35,5
data:
[
['Jan', 10],
['Feb', 35],
['Mar', 5]
]
},
{
id: 'Q2',
name: 'Month', //Splitting 100 as 40,35,25
data:
[
['Apr', 40],
['May', 35],
['Jun', 25]
]
},
{
id: 'Q3',
name: 'Month', //Splitting 50 as 5,25,20
data:
[
['Jul', 5],
['Aug', 25],
['Sep', 20]
]
},
{
id: 'Q4',
name: 'Month', //Splitting 250 as 75,125,50
data:
[
['Oct', 75],
['Nov', 125],
['Dec', 50]
]
},
] //End Series
} //End Year Drilldown
}); //End Highchart function
//Explicitly change Y axis
var curChart = $('#chart1').highcharts();
curChart.yAxis[0].update({
title:{
text:"Number of Hits"
}
});
/*End*/
I was able to figure out what the issue was.
The name parameter and drilldown parameter were having same values.
I just renamed name parameter from 'Q1' to '_Q1' and it worked like a charm.
{
name: 'Q1',
y: 50,
drilldown: '_Q1'
}
Updated JSFiddle :
https://jsfiddle.net/foodiepanda/2ec7d6fz/11/
I would like the make a bar or column graph using daily data, and by default user should get annual representation of the data, then if the user clicks on a column of a specific year, they get a monthly break down of that year.
Please help
Thanks
Also add the desire plugin to it
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text:"Fortune 500 Companies by Country"
},
axisX:{
interval: 1
},
axisY2:{
interlacedColor: "rgba(1,77,101,.2)",
gridColor: "rgba(1,77,101,.1)",
title: "Number of Companies"
},
data: [{
type: "bar",
name: "companies",
axisYType: "secondary",
color: "#014D65",
dataPoints: [
{ y: 3, label: "January" },
{ y: 7, label: "Febrary" },
{ y: 5, label: "March" },
{ y: 9, label: "April" },
{ y: 7, label: "May" },
{ y: 7, label: "June" },
{ y: 9, label: "Jult" },
{ y: 8, label: "August" },
{ y: 11, label: "September" },
{ y: 15, label: "October" },
{ y: 12, label: "November" },
{ y: 15, label: "December" },
]
}]
});
chart.render();
}
</script>
I have been trying to modify the look of highcharts bars and I have managed to make the horizontal bar charts to look like progress bar charts. I followed this answer here in SO in order to do that. Right now, I am having two problems with this. The chart looks fine if I have one data series but here is how it looks if I have more than one series (there can be up to 3 series).
Therefore, I want to increase the margin between the labels (USA, Japan etc). Secondly, I would like to align the data labels (10, 40, 20 etc) towards the right of the chart, outside the bars. I think I need to write some javascript but I am not sure where to start or what to modify. Any help is appreciated.
Thanks.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: '#003755',
marginBottom: 60,
marginLeft: 80,
marginTop: 40,
marginRight: 140
},
colors: ['#0AA3DB', '#3AC6B1', '#000612'],
xAxis: [{
categories: ['USA', 'Japan', 'Canada', 'Brasil', 'China', 'Russia', 'UK', 'France', 'NA'],
labels: {
align: 'left',
x: 0,
y: -13,/* to be adjusted according to number of bars*/
style: {
fontSize: "0.875rem",
color: '#fff'
}
},
lineColor: 'transparent',
tickLength: 0
}],
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
labels: {
enabled: false
}
},
plotOptions: {
bar: {
dataLabels: {
allowOverlap: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
series: {
pointWidth: 8, //width of the column bars irrespective of the chart size
borderRadius: 5,
borderColor: 'transparent',
pointPadding: 0,
groupPadding: 0,
dataLabels: {
enabled: true,
format: '<b>{point.y:,.0f}</b>',
shared: true,
useHTML: true,
align: 'right'
}
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
yDecimals: 2
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<b>{point.name} - {point.y:,.0f}%</b>',
shared: true,
useHTML: true
},
series: [{
name: 'Current',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2005',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2023',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}]
});
https://jsfiddle.net/fbsveysb/
Use groupPaddingfor increasing the space between column groups.
The default value of dataLabels.align is left (point on the left side of the label) - this value should be used to position data labels outside of the bars.
Live working demo: https://jsfiddle.net/kkulig/w782cud7/
API references:
https://api.highcharts.com/highcharts/series.bar.dataLabels.align
https://api.highcharts.com/highcharts/series.bar.groupPadding
This may be one of the possible solution as I made in comment. It uses Scrollbars for any axis which shows how to have scroll in axis. It uses highstock.js file, it can be applied to regular Highcharts axes.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: '#003755',
marginBottom: 60,
marginLeft: 80,
marginTop: 40,
marginRight: 140,
events: {
load: function() {
var maxVal = 0;
for (var i = 0; i < this.series.length; i++) {
if (Math.max.apply(Math, this.series[i].yData) > maxVal) {
maxVal = Math.max.apply(Math, this.series[i].yData)
}
}
this.yAxis[0].setExtremes(0, maxVal + 10)
}
}
},
colors: ['#0AA3DB', '#3AC6B1', '#000612'],
xAxis: [{
categories: ['USA', 'Japan', 'Canada', 'Brasil', 'China', 'Russia', 'UK', 'France', 'NA'],
labels: {
align: 'left',
x: 0,
y: -20,
/* to be adjusted according to number of bars*/
style: {
fontSize: "0.875rem",
color: '#fff'
}
},
lineColor: 'transparent',
tickLength: 0,
min: 0,
max: 4,
scrollbar: {
enabled: true
},
}],
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
labels: {
enabled: false
}
},
plotOptions: {
bar: {
grouping: true,
pointPadding: 0,
dataLabels: {
allowOverlap: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
series: {
pointWidth: 8, //width of the column bars irrespective of the chart size
borderRadius: 5,
borderColor: 'transparent',
dataLabels: {
enabled: true,
//format: '{point.y:.1f}',
format: '<b>{point.y:,.0f}</b>',
shared: true,
useHTML: true,
overflow: 'none'
}
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
yDecimals: 2
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<b>{point.name} - {point.y:,.0f}%</b>',
shared: true,
useHTML: true
},
series: [{
name: 'Current',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2005',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2023',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}]
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container"></div>
firstly here is my code
http://jsfiddle.net/woon123/5t2gpyx7/
$(function () {
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'venue_chart',
},
credits: {
enabled: false
},
title: {
text: 'Popularity of Venues'
},
subtitle: {
text: 'Redemption Count'
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of Users'
}
},
xAxis: {
type: 'category'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30
},
series: [{
name: "Chicken Up # Jurong East",
data: [{
name: "Chicken Up # Jurong East",
y: 30,
drilldown: "Chicken Up # Jurong East"
}]
}, {
name: "Chicken Up # Tanjong Pagar",
data: [{
name: "Chicken Up # Tanjong Pagar",
y: 50,
drilldown: "Chicken Up # Tanjong Pagar"
}]
}, {
name: "Chicken Up # Tampines",
data: [{
name: "Chicken Up # Tampines",
y: 60,
drilldown: "Chicken Up # Tampines"
}]
}, ],
drilldown: {
series: [{
name: "Redemption Count",
id: "Chicken Up # Jurong East",
data: [
[
"Yangpa Bomb Introductory Promo", 5],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 4],
[
"Soju Cocktails at $17.00", 1],
[
"12345678", 10],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10], ]
}, {
name: "Redemption Count",
id: "Chicken Up # Tanjong Pagar",
data: [
[
"Yangpa Bomb Introductory Promo", 10],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 10],
[
"Soju Cocktails at $17.00", 10],
[
"12345678", 10],
[
"Early Bird 20% Off Bill", 3],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 17], ]
}, {
name: "Redemption Count",
id: "Chicken Up # Tampines",
data: [
[
"Yangpa Bomb Introductory Promo", 10],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 10],
[
"Soju Cocktails at $17.00", 15],
[
"12345678", 15],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10], ]
}, ]
}
});
});
My problem is that although the legend displays properly, when using type:category in the x-axis it only shows the last name which is Chicken Up # Tampines.
I would like for the x-axis to show all three venues instead of just the last one and the legend to remain as it is.
Another issue is after I drill down.
In this case, I would like the legend to display the x-axis in order to allow me to toggle them on/off.
I tried setting x-axis to display categories['venue1', 'venue2', 'venue3'] but in this case my legend just shows series 1.
I would like some advice on how to make both the legend and x-axis be the same.
Thank you!
i give you two fiddles,these can be a clue !
first: fiddle
$(function(){
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Staten Island Violation Distribution'
},
subtitle: {
text: 'Source: NYC Open DataSet</a>'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
data: {
csv: document.getElementById('csv').innerHTML
},
yAxis: {
min: 0,
title: {
text: 'Count'
}
},
legend: {
enabled: true
},
tooltip: {
pointFormat: 'Count: <b>{point.y}</b>'
},
plotOptions: {
column: {
grouping: false,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
series: [ { name: "Description" },
{ name: "Description1" },
{ name: "Description2" },
{ name: "Description3" },
{ name: "Description4" },
{ name: "Description5" } ]
});
});
second:fiddle
$(function () {
// Create the chart
$('#container').highcharts({
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]
]
}]
}
});
});
happy coding !
I've got this bubble chart very simple, what I want it's to show in the xaxis a custom string instead of the x value. For the fist object in the serie in the x axis show proyect 1 and so on.
$(function () {
var names = ["DAVE","JOHN"];
var projects = ["Project 1","Project 2"];
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 'Highcharts for staff project time'
},
xAxis: {
categories:['Project 1', 'Project 2', 'Project 3']
},
series: [{
data: [
{ x: 3.5, y: 4, z: 5, color: 'blue' },
{ x: 7, y: 7, z: 3, color: 'blue' },
{ x: 4, y: 8, z: 6, color: 'blue' }
],
}]
});
});
we want to show project 1, proyect 2.... instead of the corresponding x value. Maybe in the x axis like it shows there
xAxis: {
categories:['Project 1', 'Project 2', 'Project 3']
},
or in the object for example
data: [
{ name: Proyect 1, x: 3.5, y: 4, z: 5, color: 'blue' },
{ name: Proyect 2, x: 7, y: 7, z: 3, color: 'blue' },
{ name: Proyect 3, x: 4, y: 8, z: 6, color: 'blue' }
],
and then show in the x axis name instead the x value.
Here's the jsfiddle that I been using for test replacing the data for my data.
http://jsfiddle.net/jlbriggs/36zn2/1/
We've got this bubble chart very simple, what we want it's to show in the xaxis a custom string instead of the x value
$(function () {
var names = ["DAVE","JOHN"];
var projects = ["Project 1","Project 2"];
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 'Highcharts for staff project time'
},
xAxis: {
categories:['Project 1', 'Project 2', 'Project 3']
},
series: [{
data: [
{ x: 3.5, y: 4, z: 5, color: 'blue' },
{ x: 7, y: 7, z: 3, color: 'blue' },
{ x: 4, y: 8, z: 6, color: 'blue' }
],
}]
});
});
we want to show project 1, proyect 2.... instead of the corresponding x value. Maybe in the x axis like it shows there
xAxis: {
categories:['Project 1', 'Project 2', 'Project 3']
},
or in the object for example
data: [
{ name: Proyect 1, x: 3.5, y: 4, z: 5, color: 'blue' },
{ name: Proyect 2, x: 7, y: 7, z: 3, color: 'blue' },
{ name: Proyect 3, x: 4, y: 8, z: 6, color: 'blue' }
],
and then show in the x axis name instead the x value.
I get the answer from Highcharts helpdesk and I want to share it:
In first scenario, labels from categories are not printed, because categories are indexed from 0, so you have labels "until 2" index. But in data you refer to 3,5 / 4 / 7 index, so only numbers are printed. (Labels with these index don't exist in categories).
You can use solutions for that:
- fix index in your data, like here: http://jsfiddle.net/ee5ffq9w/1/
- increase amount of categories
- use points with category name: http://jsfiddle.net/ee5ffq9w/2/