$(function() {
$('#container').highcharts({
title: {
text: ''
},
charts: {
zoomType: 'xy',
},
exporting: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
],
},
yAxis: {
title: '',
},
labels: {
items: [{
style: {
left: '50px',
top: '18px',
}
}]
},
tooltip: {
shared: true,
},
credits: {
enabled: false
},
plotOptions: {
series: {
label: {
enabled: false
},
},
column: {
states: {
hover: {
color: '#90D0FF'
}
}
}
},
series: [{
type: 'column',
name: 'Provide Feedback',
data: [10, 4, 5, 6, 8, 9, 2, 3, 4, 5, 6, 9],
color: 'yellow'
},
{
name: 'Satisfied to Loyal',
type: 'spline',
data: [2, 5, 4, 3, 2, 3, 7, 8, 9, 5, 4, 3],
color: '#55BF3B',
dataLabels: {
enabled: false
},
tooltip: {
valueSuffix: [' (1%)', ' (2%)', ' (18%)', ' (10%)', ' (3%)', ' (1%)', ' (1%)', ' (6%)', ' (4%)', ' (1%)', ' (8%)', ' (70%)'],
// valueSuffix: ' (val %)',
},
marker: {
lineWidth: 4,
fillColor: 'white',
width: 16,
height: 16
}
},
{
name: 'Unhappy to Satisfied',
type: 'spline',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 5, 4],
color: '#FFC800',
tooltip: {
valueSuffix: [' (10%)', ' (12%)', ' (1%)', ' (100%)', ' (30%)', ' (10%)', ' (10%)', ' (60%)', ' (34%)', ' (10%)', ' (98%)', ' (40%)'],
// valueSuffix: ' (val %)',
},
marker: {
lineWidth: 4,
fillColor: 'white',
width: 16,
height: 16
}
}
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>