Area chart
var categories= [
' Before 5th ',
' Before 4th ',
' Before 3rd ',
' Before 2nd ',
' Before 1st ',
' After 1st ',
' After 2nd ',
' After 3rd ',
' After 4th ',
' After 5th '
];
Item.highcharts ({
Chart: {
Type: ' Areaspline ',
Zoomtype: ' x ',
width:670,
height:260,
BackgroundColor: ' #fcfcfc '
padding:0
},
colors:[' #65b5f3 ', ' #ff9399 ', ' #cdcdcd '],
exporting:{
Enabled:false
},
Title: {
Text: '
},
Legend: {
Enabled:false,
Layout: ' Horizon ',
Align: ' left ',
VerticalAlign: ' Top ',
X:300,
Y:-10,
Floating:true,
BorderWidth:. 1,
BackgroundColor: ' #FFFFFF ',
Margin:14,
Symbolwidth:14,
Symbolheight:3,
Padding:10,
width:300
},
Xaxis: {
LineColor: "#efefef",
ticklength:0,
Color: ' #8d8d8d ',
labels:{
style:{
Color: "#8d8d8d"
},
Formatter:function () {
return Categories[this.value];
}
},
min:0,
Max:8
Tickinterval:1
},
YAxis: {
Title: {
Text: '
},
Linewidth:1,
Gridlinewidth:1,
Allowdecimals:true,
Tickinterval:1,
Tickcolor: ' Red ',
GridlineColor: ' #efefef ',
LineColor: "#efefef",
labels:{
style:{
Color: "#8d8d8d"
}
},
Max:limit.max,
Min:limit.min
},
ToolTip: {
Shared:true,
Valuesuffix: ' units ',
BackgroundColor: ' #2c3238 ',
Crosshairs: {
Width:1,
Color: ' #777 ',
DashStyle: ' Dash '
},
style:{
Color: ' #fff '
},
Formatter:function () {
var data = this.points;
var html = "";
for (var i = 0; i < data.length; i++) {
html+= "<span style= ' color: #fff ' >" +data[i].series.name+ ":" +data[i].y+ "%</span><br>";
}
return HTML;
}
},
Credits: {
Enabled:false
},
Plotoptions: {
Areaspline: {
fillopacity:0.2,
Linewidth:1,
marker:{
states:{
hover:{
Enabled:false
}
}
}
},
Series: {
marker:{
Enabled:false
},
states:{
hover:{
Linewidth:1
}
}
},
area:{
marker:{
states:{
hover:{
Linewidth:1
}
}
}
}
},
Series:data
});
Pie chart:
$ (function () {
var Chartnumtimer;
$ ("#srfx"). Highcharts ({
Chart: {
Plotbackgroundcolor:null,
Plotborderwidth:null,
Plotshadow:false,
width:130,
height:136,
Backgroundcolor:null
},
colors:[' #fbd562 ', ' #92be0f ', ' #ff9755 ', ' #fbd562 ', ' #b3daf8 '],
Title: {
Text: '
},
ToolTip: {
Bordercolor:null,
borderwidth:0,
Usehtml:true,
Shadow:false,
Backgroundcolor:null,
hidedelay:0,
Positioner:function () {
return {
X:13,
Y:30
}
},
Pointformat: ' <b>{point.percentage:.1f}%</b> '
Formatter:function (data) {
Return ' <div class= ' chart_for ' > ' +this.point.percentage.tofixed (2) + ' <b style= ' font-size:14px; " >%</b></div><div style= "Width:92px;text-align:center;font-family:simsun" > ' +this.point.name + ' </div> '
}
},
exporting:{
Enabled:false
},
credits:{
Enabled:false
},
Plotoptions: {
Pie: {
Allowpointselect:false,
Cursor: ' pointer ',
size:130,
INNERSIZE:100,
Shadow:false,
states:{
hover:{
Enabled:false
}
},
DataLabels: {
Enabled:false
},
point:{
events:{
Mouseover:function () {
var box = $ ('. Init_info ');
var num = this.percentage.toFixed (2);
Box.fadeout (0). FIND (". Num"). html (num);
Box.find (". Name"). HTML (this.name);
Cleartimeout (Chartnumtimer);
},
Mouseout:function () {
Chartnumtimer = SetTimeout (function () {
$ ('. Init_info '). Show ();
},0);
}
}
}
}
},
Series: [{
Type: ' Pie ',
Name: ' Browser share ',
Data: [
[' Interest income ', 32],
{
Name: ' Interest income ',
Y:32,
Selected:true
},
[' granting of loans and advances ', 16],
[' granting of loans and advances ', 32],
[' granting of loans and advances ', 32],
[' granting of loans and advances ', 5]
]
}]
});
});
Highcharts Common parameter settings