direccion
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-
software/highcharts.com/tree/master/samples/highcharts/demo/line-labels/
$(function () {
$('#container').highcharts({
colors: ["#FFFC01", "#F60505", "#000000"],
chart: {
zoomType: 'xy',
type: 'column',
width: 650,
height: 400
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: '',
margin: 0
},
xAxis: {
categories: ['Nov', 'Dic', 'Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun',
'Jul', 'Ago', 'Sep', 'Oct']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
yAxis: [
{ // Primary yAxis
title: {
text: 'Cantidad Operaciones',
style: {
color:
Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} ',
//rotation: -45,
style: {
color:
Highcharts.getOptions().colors[0]
}
},
stackLabels: {
enabled: true,
//rotation: -45,
style: {
fontWeight: 'bold',
color: (Highcharts.theme &&
Highcharts.theme.textColor) || 'black'
}
},
opposite: true
},
{ // Secondary yAxis
title: {
text: 'Cantidad Cuentas Usuarios',
style: {
color:
Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} ',
style: {
color:
Highcharts.getOptions().colors[1]
}
}
},
],
tooltip: {
shared: true
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 0,
floating: false,
backgroundColor: (Highcharts.theme &&
Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}'
},
plotOptions: {
column: {
//stacking: 'none',
dataLabels: {
enabled: true,
//rotation: -1,//rotation: -90,
color: '#FFFFFF',
//y: -5, // 10 pixels down from the
top
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
},
align: 'center',
verticalAlign: 'top',
}
}
},
series: [{
name: 'Consultas',
data: [0, 0, 114, 224, 169, 210, 287, 398, 128, 111, 280, 8],
dataLabels: {
y: -5, // 10 pixels down from the top
}
}, {
name: 'Movimientos',
data: [0, 0, 60, 26, 27, 102, 52, 5, 37, 35, 26, 5],
dataLabels: {
y: 5, // 10 pixels down from the top
}
},
{
yAxis: 1,
name: 'Usuarios',
type: 'spline',
dataLabels: {
enabled: true,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
},
//align: 'center',
},
data: [0, 0, 3, 4, 5, 8, 11, 15, 17, 16,
14, 10]
}
]
});
});

Htmlgraficcode

  • 1.
    direccion http://jsfiddle.net/gh/get/jquery/1.9.1/highslide- software/highcharts.com/tree/master/samples/highcharts/demo/line-labels/ $(function () { $('#container').highcharts({ colors:["#FFFC01", "#F60505", "#000000"], chart: { zoomType: 'xy', type: 'column', width: 650, height: 400 }, credits: { enabled: false }, exporting: { enabled: false }, title: { text: '', margin: 0 }, xAxis: { categories: ['Nov', 'Dic', 'Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct'] }, yAxis: { title: { text: 'Temperature (°C)' } }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, yAxis: [ { // Primary yAxis title: { text: 'Cantidad Operaciones', style: { color: Highcharts.getOptions().colors[0] } }, labels: { format: '{value} ', //rotation: -45, style: { color: Highcharts.getOptions().colors[0] } }, stackLabels: { enabled: true, //rotation: -45, style: { fontWeight: 'bold', color: (Highcharts.theme && Highcharts.theme.textColor) || 'black' } },
  • 2.
    opposite: true }, { //Secondary yAxis title: { text: 'Cantidad Cuentas Usuarios', style: { color: Highcharts.getOptions().colors[1] } }, labels: { format: '{value} ', style: { color: Highcharts.getOptions().colors[1] } } }, ], tooltip: { shared: true }, legend: { align: 'right', x: -30, verticalAlign: 'top', y: 0, floating: false, backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', borderColor: '#CCC', borderWidth: 1, shadow: false }, tooltip: { headerFormat: '<b>{point.x}</b><br/>', pointFormat: '{series.name}: {point.y}' }, plotOptions: { column: { //stacking: 'none', dataLabels: { enabled: true, //rotation: -1,//rotation: -90, color: '#FFFFFF', //y: -5, // 10 pixels down from the top style: { fontSize: '10px', fontFamily: 'Verdana, sans-serif' }, align: 'center', verticalAlign: 'top', } } }, series: [{
  • 3.
    name: 'Consultas', data: [0,0, 114, 224, 169, 210, 287, 398, 128, 111, 280, 8], dataLabels: { y: -5, // 10 pixels down from the top } }, { name: 'Movimientos', data: [0, 0, 60, 26, 27, 102, 52, 5, 37, 35, 26, 5], dataLabels: { y: 5, // 10 pixels down from the top } }, { yAxis: 1, name: 'Usuarios', type: 'spline', dataLabels: { enabled: true, style: { fontSize: '10px', fontFamily: 'Verdana, sans-serif' }, //align: 'center', }, data: [0, 0, 3, 4, 5, 8, 11, 15, 17, 16, 14, 10] } ] }); });