@extends('complementos.nav')
@section('contenido')

<figure class="highcharts-figure">
<div id="container"></div>
</figure>

<script>
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: '<b style="color:#d1a000;">PEDIMENTOS PAGADOS POR SUCURSAL</b>'
  },
  subtitle: {
    text: '<b style="color:#d1a000;">2024</b>'
  },
  xAxis: {
    categories: [
      'ANAHI',
      'ARELY',
      'BELEN',
      'CECILIA',
      'ELDA',
      'EXPO',
      'FAJARDO',
      'FCO',
      'GUSTAVO',
      'KARELY',
      'LAURA',
      'MONICA',
      'NORMA',
      'PABLO',
      'PETRICIA',
      'YURI'
    ],
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: ''
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0,
      dataLabels: {
        enabled: true,
        color: '#fff',
      }
    }
  },
  legend: {

    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -40,
    y: 80,
    floating: true,
    borderWidth: 1,
    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#000'),
    shadow: true
  },
  credits: {
    enabled: true
  },
  series: [{
    name: 'Enero',
    data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]

  }, {
    name: 'Febrero',
    data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]

  }, {
    name: 'Marzo',
    data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]

  }, {
    name: 'Abril',
    data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]

  }, {
    name: 'Mayo',
    data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]

  }, {
    name: 'Junio',
    data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]

  }, {
    name: 'Julio',
    data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]

  }, {
    name: 'Agosto',
    data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]

  }, {
    name: 'Septiembre',
    data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]

  }, {
    name: 'Octubre',
    data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]

  }, {
    name: 'Noviembre',
    data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]

  }, {
    name: 'Diciembre',
    data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]

  }]
});
</script>

@endsection