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!
Related
This question already has an answer here:
Highcharts - Force Categories in x-axis to be shown, even without data
(1 answer)
Closed 6 years ago.
I have following jsFiddle
http://jsfiddle.net/9v636zt3/
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: [0.0001,0.001,0.01,0.1,1,10,100]
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5]
}]
});
});
Using highcharts, I want to show the x-axis labels 0.0001,0.001,0.01,0.1,1,10,100 in series. but does not show it some how.
How can I force to show all the x-axis values?
Please help.
I think you are missing something i was able to plot your chat with the data you supply using this code below.
$(function () {
$('#container').highcharts({
chart: {
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: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [0.0001,0.001,0.01,0.1,1,10,100],
plotBands: [{
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5,0,0,0]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5]
}]
});
});
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]
}]
});
I make a funnel with this script
$(function () {
$('#container').highcharts({
chart: {
type: 'funnel',
marginRight: 100
},
title: {
text: 'Sales funnel',
x: -50
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
softConnector: false
},
neckWidth: '2%',
neckHeight: '0%',
//-- Other available options
//height: pixels or percent
width: '100%'
}
},
legend: {
enabled: false
},
series: [{
name: 'Unique users',
data: [
['Item 1', 15005],
['Item 2', 1681],
['Item 3', 1254],
['Item 4', 1165],
['Item 5', 800],
['Item 6', 60],
['Item 7', 202],
]
}]
});
});
http://jsfiddle.net/fainz777/j7p76n6r/1/
If it possible to make it to this view http://c2n.me/38zvhae ?
Each bar have equal height and only width depends on value.
Thanks for help.
There is no function in Highcharts API to make that chart. Funnel type chart has only one change in width from tapered to straight.
Instead you can try to use area range type chart.
JSFiddle: http://jsfiddle.net/rb4j0unv/
$(function () {
$('#container').highcharts({
chart: {
type: 'arearange',
inverted: true,
zoomType: 'x'
},
legend: {
enabled: false
},
series: [{
data: [{low:-100, high:100, x: 0},{low:-50, high:50, x: 1}]
},{
data: [{low:-50, high:50, x: 1},{low:-40, high:40, x: 3}]
},{
data: [{low:-40, high:40, x: 3},{low:0, high:0, x: 4}]
}]
});
});
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/
I want to reduce space between bar chart series data. Below mentioned is the image which gives a clear picture :
Can anyone suggest the best approach to do it?
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635],
pointWidth: 22,
}, {
name: 'Year 1900',
data: [133, 156, 947],
pointWidth: 22
}]
});
});
http://jsfiddle.net/fMdk3/5/
The options you want to play with are pointPadding (padding between bars) and groupPadding (padding between seies).
e.g.
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0.1,
}
},
e.g. http://jsfiddle.net/BZzWQ/