Related
Hi guys I want to achieve something like this using HighCharts Stacked Column
This is my current code
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
}
}
},
xAxis: {
categories: ['Cukai Semasa', 'Tunggakan Cukai']
},
series: [{
name: 'Baki Cukai Semasa',
data: [69000000, 60000000]
}, {
name: 'Kutipan Semasa',
data: [69000000, 60000000]
}]
Which resulting this chart
As you can see, my generated chart dont have the label for Tunggakan Cukai category (Baki Kutipan Tunggakan and Kutipan Tunggakan).
How to achieve this using Stacked Column?
Thanks
Another way is to use series.legendType: 'point'.
Code:
Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
column: {
legendType: 'point',
stacking: 'normal',
dataLabels: {
enabled: true,
}
}
},
xAxis: {
categories: ['Cukai Semasa', 'Tunggakan Cukai']
},
series: [{
data: [{
name: 'Baki Cukai Semasa',
y: 69000000,
color: '#72AD4D'
}, {
name: 'Baki Kutipan Tunggakan',
y: 60000000,
color: '#FC3D45'
}]
}, {
data: [{
name: 'Kutipan Semasa',
y: 69000000,
color: '#AAD092'
}, {
name: 'Kutipan Tunggakan',
y: 60000000,
color: '#FD7C82'
}]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/9xmnrqp2/
One way of achieving this and showing all points in legend is by making them individual series:
series: [{
name: 'Baki Cukai Semasa',
data: [69000000, null]
}, {
name: 'Kutipan Semasa',
data: [60000000, null]
}, {
name: 'Baki Kutipan Tunggakan',
data: [null, 69000000]
}, {
name: 'Kutipan Tunggakan',
data: [null, 60000000]
}]
See this JSFiddle demonstration of it in use.
I don't understand why there are all these strange vertical lines in this form:
Here is the JS Fiddle
https://jsfiddle.net/oz73d3gg/
Code:
Highcharts.chart('js-chart-rating-month', {
credits: {
enabled: false
},
title: {
text: 'Ratings'
},
xAxis: {
allowDecimals: false,
},
yAxis: {
title: {
text: 'Ratings'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: true
}
}
},
series: [{
name: 'Ratings',
data: [[2006,9], [2007,6], [2007,8], [2008,9], [2009,9], [2009,7], [2009,9], [2009,10], [2010,9], [2010,9], [2010,10], [2010,8], [2011,8], [2011,8], [2011,10], [2011,5], [2011,9], [2011,9], [2012,10], [2012,9], [2012,9], [2012,10], [2012,10], [2013,9], [2013,9], [2013,9], [2013,9], [2014,8], [2014,10], [2014,10], [2015,9], [2015,9], [2015,8], [2015,10], [2015,8], [2016,10], [2016,10], [2016,9], [2016,9], [2016,10], [2016,10], [2016,8], [2017,10], [2017,9], [2017,10], [2017,9], [2017,10], [2017,8] ]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
Also, the points seem to be missing like in this graph:
Any ideas? I am drawing a blank here.
You have multiple value for the same year so you must clean you data :
series: [{
name: 'Ratings',
data: [... [2017,10], [2017,9], [2017,10], [2017,9], [2017,10], [2017,8] ] // Only 1 value for each year
}],
Fiddle
My chart was ok, I don't know what happened that the series name disappeared!
Maybe highcharts last updates need another options, or rtl causes problems.
My code: fiddle
What am I missing here?
$(function() {
$(document).ready(function() {
Highcharts.chart('user_info_46', {
chart: {
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
},
title: {
text: '',
useHTML: Highcharts.hasBidiBug,
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
legend: {
useHTML: true,
align: 'right',
rtl: true,
},
tooltip: {
useHTML: true,
align: 'right',
},
credits: {
enabled: false
},
series: [{
name: 'تعداد',
colorByPoint: true,
data: [{
name: 'آقا',
y: 7,
color: 'cornsilk'
}, {
name: 'خانم',
y: 2,
color: 'green'
}]
}]
});
});
});
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]
}]
});
Can you please take a look at this demo and let me know how I can enable highcharts to put the legend items in one line and at buttom of the chart?
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [43000, 19000, 60000, 35000, 17000, 10000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000, 14000],
pointPlacement: 'on'
}]
});
});
As you can see the position of the legend is the right and it is in two line now.
Thanks
You will want this:
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
}
Demo: http://jsfiddle.net/robschmuecker/pxS6X/