html, body, #container {

    width: 100%;

    height: 3000px;

    margin: 0;

}

anychart.onDocumentReady(function () {

  const data = [

    { x: new Date('2015-12-25'), a: 1, b:1, c:1},

    { x: '2015-12-24', a: 1, b:1, c:0},

    { x: '2015-12-26', a: 1, b:0, c:1},

    { x: '2015-12-27', a: 1, b:1, c:1},

    { x: '2015-12-28', a: 0, b:1, c:1},

    { x: '2015-12-29', a: 1, b:1, c:1 }

  ];

​

  const transformData = () => {

    return data.map(item => {

      const newItem = { x: item.x };

      for (const key in item) {

        if (key !== 'x') {

          newItem[key] = 1;

          newItem[key + '_opacity'] = item[key]; // Adjusted to directly use the item's value

        }

      }

      return newItem;

    });

  }

​

  const transformedData = transformData();

​

  const table = anychart.data.table('x');

  table.addData(transformedData);

​

  const mapping1 = table.mapAs({value: 'a', opacity: 'a_opacity'});

  const mapping2 = table.mapAs({value: 'b', opacity: 'b_opacity'});

  const mapping3 = table.mapAs({value: 'c', opacity: 'c_opacity'});

​

  const chart = anychart.stock();

​

  const createSeries = (mapping, name, opacityKey) => {

    const series = chart.plot(0).column(mapping);

    series.name(name);

    // Adjust fill function to correctly reference the opacity value

    series.fill(function() {

      console.log(this.series.data())

      return `${this.sourceColor} ${0.1}`;

    });

  };

​

  // Create series with correct opacity settings

  createSeries(mapping1, 'infra red', 'a_opacity');

  createSeries(mapping2, 'Intermittent Fasting', 'b_opacity');

  createSeries(mapping3, 'Cryotherapy', 'c_opacity');

​

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

  chart.plot(0).yScale().maximum(3);

  chart.plot(0).yScale().minimum(0);

​

  chart.container('container');

  chart.height(500);

  chart.draw();

});