I have a script that displays two sets of data as a bar chart left to right.
I would like to have the y axis display 100% under the chart. I currently display the percentage for both sets of data at the end of each bar.
If I add "max:100" to the yAxis property the chart only display one of the bars with the percentage
Without the "max:100" in the yAxis property the chart display both percentages
the script looks like this:
$(function () {
$('#container1').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Test'
},
subtitle: {
text: ''
},
tooltip: {
enabled: false
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -20,
y: 34,
floating: false,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
plotOptions: {
series: {
shadow:false,
borderWidth:0,
dataLabels:{
enabled:true,
formatter: function() {
return this.y +'%';
}
}
}
},
xAxis:{
categories: [''],
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickLength:3,
title:{
text:'Test'
},
},
yAxis:{
max:100,
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:3,
gridLineColor:'#ddd',
title:{
text:'Between <?php print $_POST['FromDate'];?> and <?php print $_POST['ToDate'];?>',
rotation:0,
margin:50,
},
labels:
{
enabled: true
}
},
series: [{ first set of data
},{
second set of data
}]
});
});
What I would like to have is the percentage 0% - 100% on the yAxis and the percentage of each bar at the end of the bar.
Can anyone help with this. Many thanks in advance
Related
I have used the customevents to make the labels on the x-axis clickable. And If you click it (for example, click "[Sale]") there will be an alert.
Check this: http://jsfiddle.net/dq8wbdeu/1/
$(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,
labels:{
formatter:function(){return '['+this.value+']'},
events:{
click:function(){alert(this)}
}
}
},
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'
}]
});
});
I hope the lable "[Sale]" to become red after clicking, is that possible? How can I achieve that? I tried this.style.color='red' but failed. And since "this" in the function block is a bit weird, I don't know what should I do now.
Thanks!
I want to give a color for bars depending on their values.
For example if you a bar value 5000 then the color should be Dark RED similar for 3000 less darker than 5000 bar values so on...
I want to add total space like 100TB above all bars(some text on my bar value)
`
Availability Bar Chart
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Disk Utility'
},
subtitle: {
text: 'Source: Application Name'
},
xAxis: {
categories: ['Checkout', 'Hermes', 'Hybris', 'Marketplace', 'Mobile'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Used (TB)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
data: [107, 311, 635, 203, 244]
}]
});
});
Fiddle
Here is updated fiddle
You can use "Zones" in plotoptions to define a range and relevant color , as per code below :
zones: [{
value: 200,
color: '#bdbdbd'
},{
value:300,
color: '#ff0000'
},
{
value:500,
color: 'blue'
},{
value:800,
color: 'black'
}]
I have spiderweb highchart with dynamically calculated x/y values and all labels of y-axis are displayed correctly except the last one. Did anyone have same problem?
function GenerateSpiderWebChart(conteinerId,categories,values, color) {
$('#'+conteinerId).highcharts({
chart: {
polar: true,
type: 'line',
margin: 0
},
colors: [
color
],
exporting: {
enabled: false,
buttons: {
enabled: false
}
},
title: {
text: ' ',
x: -80,
useHTML: true
},
pane: {
size: '70%'
},
xAxis: {
categories: categories,
tickmarkPlacement: 'on',
lineWidth: 0,
labels: {
align: 'center',
distance: 43
}
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
endOnTick: true
},
tooltip: {
shared: true,
headerFormat: '<span style="font-size: 12px">{point.key}:</span> <b>{point.y:,.2f}</b>',
pointFormat: '',
useHTML: true
},
legend: {
enabled: false,
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: '',
data: values,
pointPlacement: 'on'
}]
});
}
Set yAxis.showLastLabel to true. API says "Defaults to true." but it is not true in this case. Example: http://jsfiddle.net/02mssxy8/1/
showLastLabel: true
The yAxis in my chart is reversed and has a fill area, this put the fill area above the spline. Is there a way to keep the fill area below the spline when the axis is reversed?
A working jsfiddle here
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
]
},
yAxis: {
title: {
text: 'Fruit units'
},
reversed:true,
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' units';
}
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12]
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4]
}]
});
});
});
if you change the threshold to be like this jsfiddle
highcharts threshold ref here
plotOptions: {
areaspline: {
fillOpacity: 0.5,
threshold: 12
}
What worked for me was setting the threshold explicitly to null:
{
... (other series properties)
threshold: null,
...
}
I have a column chart combined with a line drawing across the chart.
When decreasing the width of the chart container to a value smaller than 357px the horizontal line is only drawn half way instead of the full width.
chart = new Highcharts.Chart({
chart: {
renderTo: 'chartcontainer',
defaultSeriesType: 'column',
borderRadius:0,
marginRight: 22,
marginBottom: 140
},
title: {
text: 'test norm',
align: 'left'
},
xAxis: [{
title: {
text: 'x',
style: {
}
},
categories: ['2008','2009','2010','2011','2012'],
labels: {
style: {
}
}
},
{ //secondary xAxis for range and norm values
gridLineWidth: 0,
labels:{
enabled:false
},
lineWidth:0,
tickWidth:0,
opposite: true,
minPadding:0,
maxPadding:0
}
],
yAxis: {
title: {
text: 'y',
style: {
}
},
labels: {
style: {
}
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'bottom',
width:700,
borderRadius: 0,
shadow:false,
floating:true,
borderWidth: 0
},
navigation: {
buttonOptions: {
enabled: false
}
},
tooltip: {
borderRadius: 0,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: false,
style: {
font: 'bold 11px Arial, Verdana, sans-serif',
fontWeight: 'bold'
},
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+ this.series.name +': '+ this.y +'<br/>';
}
},
plotOptions: {
column: {
dataLabels: {
enabled: false
},
shadow: false
}
},
series: [{ name: 'A', shadow: false, data: [8,2,8,4,6] },{ name: 'B', shadow: false, data: [1,4,2,3,4] },{ name: 'C', shadow: false, data: [4,16,8,12,16] },{ name: 'E', shadow: false, data: [8,4,6,8,2] },{
type:'line',
name:'Norm',
data:[
{
y:10.000000,
x:0.000000,
dataLabels: {
enabled: false,
align: 'left',
formatter:function(){return 'Norm: ' + this.y;},
style: {fontWeight:'bold'}
},
},
{
y:10.000000,
x:1.000000,
dataLabels: {
enabled: true,
align: 'right',
formatter:function(){return 'Norm: ' + this.y;},
style: {fontWeight:'bold'}
},
}
],
color: '#01A1EB',
lineWidth:1,
dashStyle:'Solid',
shadow: {
opacity:0.1
},
enableMouseTracking:false,
marker:{enabled:false},
xAxis:1,
showInLegend: true
}]
});
See my jsfiddle example here:
The line fully drawn:
http://jsfiddle.net/ramon_ackermann/WwSbT/7/
The line only half way:
http://jsfiddle.net/ramon_ackermann/WwSbT/8/
Any ideas what might cause this?
Cheers.
Use Plotline on the y axis instead: http://jsfiddle.net/paranoir/WwSbT/9/
plotLines: [{
color: '#FF0000',
width: 1,
value: 10
}]
Plotline would be my preferred option as well.
If you need it to be a series for some reason, however, you can do it like this:
1) set your min x value for the line at -0.5, max x value at 4.5
2) set xAxis min at 0 and max at 4
3) forget about the secondary x axis
http://jsfiddle.net/jlbriggs/WwSbT/10/
for the x axis:
xAxis: [{
min:0,
max:4,
}]
and then in the data:
...
y:10.000000,
x:-0.5,
...
y:10.000000,
x:4.5,
The second x axis appears to be part of the problem. If you hide the norm series, and then reshow it, it fills the plot area properly.