html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create data set on our data

  var dataSet = anychart.data.set([

['2003', , 4213339.28001, 4878087.10035],

['2004', 8.97683285873656, 4401057.002, 5506491.529],

['2005', -13.2675486058641, 5110120.477, 6111916.871],

['2006', 11.4806616842138, 5748225.103, 6762176.387],

['2007', 9.75582014674417, 6742757.691, 6988136.068],

['2008', -6.39263867601235, 6671569.243, 6181558.091],

['2009', -12.6734866532522, 5455108.53293, 5769079.42387],

['2010', 2.1192893978213, 5321089.75701, 6140971.22515],

['2011', 2.21127336161004, 5783519.79197, 5931998.69138],

['2012', -0.502330583436319, 5843582.595, 5813085.256],

['2013', 1.70615173866291, 5907446.8367, 5948101.45551],

['2014', 4.68760413430363, 5905830.13882, 6505459.32528],

['2015', 1.49017076690518, 6001370.06508, 6594868.80641],

['2016', 3.77570237046274, 6253802.32319, 6818033.03796],

['2017', 9.680169801945, 6570557.3141, 7766653.90624],

['2018', 4.32448608701807, 7309835.234, 7647386.69083],

['2019', 3.13162624740104, 7455285.66816, 7970340.54435],

['2020', -9.13, 7161973, 6855081],

['2021', 5.75, 8750000, 7581111]

  ]);

​

  // map data for the first series, take x from the zero column and value from the first column of data set

  var firstSeriesData = dataSet.mapAs({ x: 0, value: 1 });

​

  // map data for the second series, take x from the zero column and value from the second column of data set

  var secondSeriesData = dataSet.mapAs({ x: 0, value: 2 });

​

  // map data for the third series, take x from the zero column and value from the third column of data set

  var thirdSeriesData = dataSet.mapAs({ x: 0, value: 3 });

​

  // create column chart

  var chart = anychart.column();

  // helper function to setup label settings for all series

  var setupSeriesLabels = function (series, name) {

    series.name(name).stroke('3 #f90 1');

    series.hovered().stroke('3 #000 1');

  };

​

  // turn on chart animation

  chart.animation(true);

​

  // set chart title text settings

  chart.title(

    'Testing gráficos combinados'

  );

​

  // force chart scale to stuck series values

  chart.yScale().stackMode('value');

​

  // create scale for line series and extraYAxis

  // it force line series to not stuck with over series

  var scale = anychart.scales.linear();

  scale.minimum(-15).maximum(15).ticks({ interval: 5 });

​

  // create extra axis on the right side of chart

  // and set scale for it

  var extraYAxis = chart.yAxis(1);

  extraYAxis.orientation('right').scale(scale);

  extraYAxis.labels().padding(0, 0, 0, 5);

​

  // setup axis to append '%' symbol to label values

  extraYAxis.labels().format('{%Value}');

​

  chart.crosshair(true);

​

  // create line series and set scale for it

  var lineSeries = chart.line(firstSeriesData);

  lineSeries.name('Variación interanual');

  lineSeries.stroke('3 #000 1');

  extraYAxis.title('Variación interanual');

  lineSeries.yScale(scale).markers(true);

​

​

  // turn on legend

  chart.legend().enabled(true).fontSize(12).padding([0, 0, 20, 0]);

  // set yAxis labels formatter

  chart.yAxis().labels().format('{%Value}{groupsSeparator: }');

​

  // set titles for axes

  //chart.xAxis().title('Variación interanual');

  chart.yAxis().title('Impuestos directos e indirectos');

​

  // set interactivity hover

  chart.interactivity().hoverMode('by-x');

​

​

  // create third series with mapped data

  //chart.column(thirdSeriesData);

  var series;

  // create second series with mapped data

  series = chart.column(secondSeriesData);

  series.name('Impuestos indirectos');

  series = chart.column(thirdSeriesData);

  series.name('Impuestos directos');

​

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

});