Related
I`m trying to draw new multi line chart in Highcharts. How do I draw Balanced yAxis?
I try setting tickPositions, tickInterval etc... use tickPositions this:
Highcharts.chart('container', {
xAxis: {
},
yAxis:{
tickPositions: [0, 100, 1000, 10000],
//tickInterval : 1000
},
series: [
{
name: 'Installation',
data: [4100, 4009]
}, {
name: 'Manufacturing',
data: [1100, 1009]
}, {
name: 'Sales & Distribution',
data: [110, 1009]
},{
name: 'E4',
data: [50, 1009]
}]
});
Something like this:
Your example code uses a yAxis with type: 'linear'. Your example result image uses a yAxis with type: 'logarithmic'.
You can change your code to (JSFiddle example):
Highcharts.chart('container', {
xAxis: {
},
yAxis:{
type: 'logarithmic',
tickPositions: [0, 1, 2, 3, 4]
},
series: [
{
name: 'Installation',
data: [4100, 4009]
}, {
name: 'Manufacturing',
data: [1100, 1009]
}, {
name: 'Sales & Distribution',
data: [110, 1009]
},{
name: 'E4',
data: [50, 1009]
}]
});
I have a Highcharts column chart with drilldown and when I do drill down there is a problem. When I drill down the drill up button appears with overlapping with the chart. Is there a way to place this drill up button without overlapping with the chart.
Following is a sample code.
http://jsfiddle.net/yasirunilan/gt8n96ck/
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Highcharts multi-series drilldown'
},
subtitle: {
text: 'Click columns to drill down to single series. Click categories to drill down both.'
},
xAxis: {
type: 'category'
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: '2010',
data: [{
name: 'Republican',
y: 5,
drilldown: 'republican-2010'
}, {
name: 'Democrats',
y: 2,
drilldown: 'democrats-2010'
}, {
name: 'Other',
y: 4,
drilldown: 'other-2010'
}]
}, {
name: '2014',
data: [{
name: 'Republican',
y: 4,
drilldown: 'republican-2014'
}, {
name: 'Democrats',
y: 4,
drilldown: 'democrats-2014'
}, {
name: 'Other',
y: 4,
drilldown: 'other-2014'
}]
}],
drilldown: {
series: [{
id: 'republican-2010',
data: [
['East', 4],
['West', 2],
['North', 1],
['South', 4]
]
}, {
id: 'democrats-2010',
data: [
['East', 6],
['West', 2],
['North', 2],
['South', 4]
]
}, {
id: 'other-2010',
data: [
['East', 2],
['West', 7],
['North', 3],
['South', 2]
]
}, {
id: 'republican-2014',
data: [
['East', 2],
['West', 4],
['North', 1],
['South', 7]
]
}, {
id: 'democrats-2014',
data: [
['East', 4],
['West', 2],
['North', 5],
['South', 3]
]
}, {
id: 'other-2014',
data: [
['East', 7],
['West', 8],
['North', 2],
['South', 2]
]
}]
}
});
In following way issue can be reproduced.
Select 2010 from the Legend, then click on republicans to drill down. The chart gets overlapped with button.
To avoid overlapping the button with a chart, you can move drillUpButton outside the plot area:
drillUpButton: {
position: {
x: 0,
y: -35,
}
}
Live demo: http://jsfiddle.net/BlackLabel/v8azqpo3/
API: https://api.highcharts.com/highcharts/drilldown.drillUpButton.position.y
I'm using Highcharts to create a grouped bar chart and looking to add markers for each bar.
I've created a multi-series (bar + scatter) plot that is similar to what I want, but since there is no "grouped scatter" plot, the circle marks are centered (Screenshot attached below).
Is there a way to change it so the marks appear on the same row as the bar?
JSFiddle
Highcharts Config
{
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: ['One', 'Two', 'Three']
},
tooltip: {
enabled: true
},
series: [
{
name: '2015',
data: [7, 8, 9]
},
{
name: '2015 Goal',
marker: {
symbol: 'circle'
},
data: [5, 6, 6],
type:'scatter'
},
{
name: '2016',
data: [9, 9, 10]
},
{
name: '2016 Goal',
marker: {
symbol: 'circle'
},
data: [10,12,13],
type:'scatter'
}
]
}
Set x value for the point. By default x values for the scatter are integers - 0, 1, 2 so they are centered according to the category. You can move them a little by 0.15 and then in the pointFormatter round those values.
series: [{
name: '2015',
data: [7, 8, 9]
}, {
name: '2015 Goal',
marker: {
symbol: 'circle'
},
data: [
[-0.15, 5],
[1 - 0.15, 6],
[2 - 0.15, 6]
],
type: 'scatter'
}, {
name: '2016',
data: [9, 9, 10]
}, {
name: '2016 Goal',
marker: {
symbol: 'circle'
},
data: [
[0.15, 10],
[1 + 0.15, 12],
[2 + 0.15, 13]
],
type: 'scatter'
}]
In pointFormatter:
plotOptions: {
scatter: {
tooltip: {
pointFormatter: function() {
return `x: <b>${Math.round(this.x)}</b><br/>y: <b>${this.y}</b><br/>`
}
}
}
},
example: http://jsfiddle.net/kh8b4jy3/
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 have two stacked bar charts, but all the legends (of both bars) are displayed together. I want to group the legends based on the items stacked in the bar.
can some one help me?
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
});
I have similar type of bar. and i want to group janet and jane together as a group and joe and john as another group.
Based on the reference example you linked to, you can do this with the new series 'linkedTo' property in version 3.
http://api.highcharts.com/highcharts#plotOptions.series.linkedTo
updated example:
http://jsfiddle.net/jlbriggs/6gw5P/2/
linkedTo:':previous'
I know this is an old issue, but setting showInLegend on your series, will work, and seems the easiest way.
showInLegend: false
Eg:
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male',
showInLegend: false
}
You can't group the legends by stack, because then you'll lose the ability to identify the different components (IE either the individual series won't have a distinct color or the legend color won't match them). The legends map to the people because those are all distinct data sources and since you add them that way it displays them like that.
If you don't care about the different components having a distinct color, then you don't want a stacked bar chart at all. You can just have a normal bar chart with 2 series, male and female.
series: [{
name: 'Male',
data: [10, 7, 8, 9, 7]
},
name: 'Female',
data: [5, 5, 10, 6, 4]
}
}
You can link series using ids and linkedTo. In the example below, the first serie is linked to the second:
series: [
{
type: 'column',
name: '',
data: [],
linkedTo: 'second_serie_id', // <--- this
color: '#DE3733',
pointWidth: 1,
showInLegend: false,
},
{
id: "second_serie_id", // <--- this
type: 'scatter',
name: 'FFT 1',
data: [],
color: '#DE3733',
lineWidth: 0,
showInLegend: true,
states: { hover: { enabled: false } }
}
]