Mixed Burndown Chart

<!doctype html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-body {
      background-color: #fff;
    }

    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>


<body class="zc-body">
  
  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // CHART CONFIG
    // -----------------------------
    let chartConfig = {
      type: 'mixed',
      title: {
        text: 'Sample Burndown Chart',
        align: 'left',
        marginLeft: '23%',
      },
      legend: {
        adjustLayout: true,
        verticalAlign: 'middle',
      },
      scaleX: {
        labels: [
          'Day 1',
          'Day 2',
          'Day 3',
          'Day 4',
          'Day 5',
          'Day 6',
          'Day 7',
          'Day 8',
        ], // one label for every datapoint
      },
      scaleY: {
        guide: {
          // dashed lines
          visible: false,
        },
        label: {
          text: 'Remaing effort (hours)',
          fontSize: '14px',
        },
      },
      scaleY2: {
        label: {
          text: 'Remaing and completed tasks',
          fontSize: '14px',
        },
        maxValue: 100,
        minValue: 0,
        step: 25, // can define scale step values or default
      },
      crosshairX: {
        lineColor: '#424242',
        lineGapSize: '4px',
        lineStyle: 'dotted',
        plotLabel: {
          padding: '15px',
          backgroundColor: 'white',
          bold: true,
          borderColor: '#e3e3e3',
          borderRadius: '5px',
          fontColor: '#2f2f2f',
          fontFamily: 'Lato',
          fontSize: '12px',
          shadow: true,
          shadowAlpha: 0.2,
          shadowBlur: 5,
          shadowColor: '#a1a1a1',
          shadowDistance: 4,
          textAlign: 'left',
        },
        scaleLabel: {
          backgroundColor: '#424242',
        },
      },
      series: [{
          type: 'line',
          text: 'Remaining Tasks',
          values: [35, 42, 67, 89, 25, 34, 67, 85].sort().reverse(),
          lineColor: '#42a5f5',
          marker: {
            visible: false,
          },
          scales: 'scale-x, scale-y',
        },
        {
          type: 'line',
          text: 'Remaining Effort',
          values: [25, 32, 57, 79, 15, 24, 57, 75].sort().reverse(),
          lineColor: '#5c6bc0',
          marker: {
            type: 'square',
            backgroundColor: '#5c6bc0',
          },
          scales: 'scale-x, scale-y',
        },
        {
          type: 'line',
          text: 'Completed Tasks',
          values: [90, 80, 70, 60, 50, 40, 30, 20],
          lineColor: '#66bb6a',
          marker: {
            visible: false,
          },
          scales: 'scale-x, scale-y',
        },
        {
          type: 'bar',
          text: 'Completed Tasks',
          values: [5, 10, 6, 3, 6, 2, 0, 9],
          backgroundColor: '#ffa726',
          scales: 'scale-x, scale-y-2',
        },
      ],
    };

    // RENDER CHARTS
    // -----------------------------
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%',
    });
  </script>
</body>

</html>

<!doctype html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>


<body class="zc-body">
  
  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

</body>

</html>

.zc-body {
  background-color: #fff;
}

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}

// CHART CONFIG
// -----------------------------
let chartConfig = {
  type: 'mixed',
  title: {
    text: 'Sample Burndown Chart',
    align: 'left',
    marginLeft: '23%',
  },
  legend: {
    adjustLayout: true,
    verticalAlign: 'middle',
  },
  scaleX: {
    labels: [
      'Day 1',
      'Day 2',
      'Day 3',
      'Day 4',
      'Day 5',
      'Day 6',
      'Day 7',
      'Day 8',
    ], // one label for every datapoint
  },
  scaleY: {
    guide: {
      // dashed lines
      visible: false,
    },
    label: {
      text: 'Remaing effort (hours)',
      fontSize: '14px',
    },
  },
  scaleY2: {
    label: {
      text: 'Remaing and completed tasks',
      fontSize: '14px',
    },
    maxValue: 100,
    minValue: 0,
    step: 25, // can define scale step values or default
  },
  crosshairX: {
    lineColor: '#424242',
    lineGapSize: '4px',
    lineStyle: 'dotted',
    plotLabel: {
      padding: '15px',
      backgroundColor: 'white',
      bold: true,
      borderColor: '#e3e3e3',
      borderRadius: '5px',
      fontColor: '#2f2f2f',
      fontFamily: 'Lato',
      fontSize: '12px',
      shadow: true,
      shadowAlpha: 0.2,
      shadowBlur: 5,
      shadowColor: '#a1a1a1',
      shadowDistance: 4,
      textAlign: 'left',
    },
    scaleLabel: {
      backgroundColor: '#424242',
    },
  },
  series: [{
      type: 'line',
      text: 'Remaining Tasks',
      values: [35, 42, 67, 89, 25, 34, 67, 85].sort().reverse(),
      lineColor: '#42a5f5',
      marker: {
        visible: false,
      },
      scales: 'scale-x, scale-y',
    },
    {
      type: 'line',
      text: 'Remaining Effort',
      values: [25, 32, 57, 79, 15, 24, 57, 75].sort().reverse(),
      lineColor: '#5c6bc0',
      marker: {
        type: 'square',
        backgroundColor: '#5c6bc0',
      },
      scales: 'scale-x, scale-y',
    },
    {
      type: 'line',
      text: 'Completed Tasks',
      values: [90, 80, 70, 60, 50, 40, 30, 20],
      lineColor: '#66bb6a',
      marker: {
        visible: false,
      },
      scales: 'scale-x, scale-y',
    },
    {
      type: 'bar',
      text: 'Completed Tasks',
      values: [5, 10, 6, 3, 6, 2, 0, 9],
      backgroundColor: '#ffa726',
      scales: 'scale-x, scale-y-2',
    },
  ],
};

// RENDER CHARTS
// -----------------------------
zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%',
});