export var chartOptions = {
  credits: {
    enabled: false
  },
  chart: {
    renderTo: "container",
    defaultSeriesType: "column",
    backgroundColor: "rgba(0,0,0,0)"
  },

  xAxis: {
    categories: [],
    crosshair: true
  },
  yAxis: {
    title: {
      text: ""
    },
    labels: {
      style: {
        color: "#d4d2d2",
        font: "11px Trebuchet MS, Verdana, sans-serif"
      }
    }
  },

  legend: {
    itemStyle: {
      color: "#d4d2d2"
    }
  },
  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:.0f} pesos</b></td></tr>',
    footerFormat: "</table>",
    shared: true,
    useHTML: true
  },
  responsive: {
    rules: [
      {
        condition: {
          maxWidth: 500
        },
        chartOptions: {
          legend: {
            layout: "horizontal",
            align: "center",
            verticalAlign: "bottom"
          }
        }
      }
    ]
  }
};

export var pieOptions={
  chart: {
    renderTo: "container",
    defaultSeriesType: "pie",
    //backgroundColor: "rgba(255,0,0,)"
  },
  xAxis: {
    categories: [],
    crosshair: true

  },
  credits: {
    enabled: false
  },
  plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
        }
    }
},
};

export var ingresosvscomprasOptions = {
         chart: {
           renderTo: "container",
           defaultSeriesType: "bar",
           backgroundColor: "rgba(0,0,0,0)"
         },
         title: {
           text: "Gastos Vs Ingresos"
         },
         plotOptions: {
           bar: {
             grouping: false,
             shadow: false,
             borderWidth: 0.5
           },
         },
         legend: {
           shadow: true
         },

         credits: {
           enabled: false
         },
         xAxis: {
           categories: [""],
           crosshair: false
         },
         yAxis: [
           {
             min: 0,
             title: {
               text: "Pesos"
             }
           }
         ],
         series: [
           {
             name: "Ingresos",
              
             color: "rgba(0,80,200,.5)",
             data: [150],
             pointPadding: 0.25,
             pointPlacement: -0.2
           },
           {
             name: "Gastos",
             color: "rgba(165,0,217,1)",
             data: [120],
             pointPadding: 0.3,
             pointPlacement: -0.2
           }
         ]
       };

       export var ingresosvsegresosOptions = {
        chart: {
          renderTo: "container",
          defaultSeriesType: "bar",
          backgroundColor: "rgba(0,0,0,0)"
        },
        title: {
          text: ""
        },
        plotOptions: {
          bar: {
            grouping: false,
            shadow: false,
            borderWidth: 0.5
          },
        },
        legend: {
          shadow: false
        },

        credits: {
          enabled: false
        },
        xAxis: {
          categories: [""],
          crosshair: false
        },
        yAxis: [
          {
            min: 0,
            title: {
              text: "Pesos"
            }
          }
        ],
        series: [
          {
            name: "Ingresos",
             
            color: "rgba(0,80,200,.5)",
            data: [],
            pointPadding: 0.25,
            pointPlacement: -0.2
          },
          {
            name: "Egresos",
            color: "rgba(165,0,217,1)",
            data: [],
            pointPadding: 0.3,
            pointPlacement: -0.2
          }
        ]
      };