Chart

<fine-chart 
  id='myChart1'
  config='{
    "Width":600,
    "Height": 400,
    "Legend": {
      "Appearance":{
        "Position":"top"
      }
    },
    "PlotArea": {
      "ListOfSeries":[
        {
          "ChartType":"column",
          "Items":[
            {
              "YValue":50
            },
            {
              "YValue":50
            },
            {
              "YValue":50
            }
          ],
          "Name":"My series 1"
        },
        {
          "ChartType":"column",
          "Items":[
            {
              "YValue":70
            },
            {
              "YValue":70
            },
            {
              "YValue":70
            }
          ],
          "Name":"My series 2"
        }
      ],
      "XAxis":{
        "Title": "Category axis",
        "Items":[
          {
            "Text": "Q3"
          },
          {
            "Text": "Q4"
          }
        ]
      }
    }
  }'
></fine-chart>

<fine-chart id='myChart2'></fine-chart>
  
<script type="text/javascript">
  fine.ready(function(e) {
    // imports are loaded and elements have been registered
    var chartEl = document.getElementById('myChart2');
    chartEl.config = {
      Width: 600,
      Height: 400,
      Legend: {
        Appearance: {
          Position: 'bottom'
        }
      },
      PlotArea: {
        ListOfSeries: [
          {
            ChartType: 'Column',
            Stacked: true,
            Items: [
              {YValue: 50}, {YValue: 50}, {YValue: 50}
            ]
          },
          {
            ChartType: 'column',
            Stacked: true,
            Items: [
              {YValue: 70}, {YValue: 70}, {YValue: 70}
            ]
          }
        ],
        XAxis: {
          Title: 'Category Axis',
          Items: [
            {Text: 'Q1'}, {Text: 'Q2'}
          ]
        }
      }
    };
    chartEl.config.Legend.Appearance.Position = 'left';
    chartEl.init();
  });
</script>