Dark Dashboard Template

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/DHJ3SPGO

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

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

    .zc-ref {
      display: none;
    }

    .container {
      background-color: #221f2d;
      padding: 10px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 1fr);
      grid-gap: 10px;
    }

    .pie-chart {
      grid-column: 4;
      grid-row: 2;
    }

    .line-chart {
      grid-column: 1 / 2;
      grid-row: 1;
    }

    .hbar-chart {
      grid-column: 2 / 5;
      grid-row: 1;
    }

    .bar-chart {
      grid-column: 1 / 4;
      grid-row: 2;
    }

    .filler-chart-one {
      grid-column: 1 / 3;
      grid-row: 3;
    }

    .filler-chart-two {
      grid-column: 3/ 5;
      grid-row: 3;
    }
  </style>
</head>

<body>
  <!-- CHART CONTAINER -->
  <div class="container">
    <div id="myChart2" class="chart--container line-chart"></div>
    <div id="myChart3" class="chart--container hbar-chart"></div>
    <div id="myChart4" class="chart--container bar-chart"></div>
    <div id="myChart1" class="chart--container pie-chart"></div>
    <div id="myChart5" class="chart--container filler-chart-one"></div>
    <div id="myChart6" class="chart--container filler-chart-two"></div>
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content

      // full ZingChart schema can be found here:
      // https://www.zingchart.com/docs/api/json-configuration/
      let chartConfigLine = {
        type: 'line',
        backgroundColor: '#2f2b3f',
        title: {
          text: 'Active Users',
          fontColor: '#7d798d',
          fontSize: '14px',
          textAlign: 'left',
        },
        plot: {
          aspect: 'spline',
        },
        scaleX: {
          values: ['Aug 1', 'Aug 10', 'Aug 17'],
          lineColor: 'none',
          tick: {
            visible: false,
          },
        },
        scaleY: {
          guide: {
            lineColor: 'none',
          },
          lineColor: 'none',
          tick: {
            visible: false,
          },
        },
        series: [{
          values: [
            [0, 1],
            [0.2, 1.2],
            [0.4, 0.7],
            [1, 0.5],
            [1.2, 2],
            [1.4, 1.5],
            [1.6, 3],
            [2, 4],
          ],
          lineColor: '#5f5596',
          marker: {
            backgroundColor: '#e496d5',
            borderColor: 'none',
            size: '4%',
          },
        }, ],
      };

      let chartConfigPie = {
        type: 'pie3d',
        backgroundColor: '#2f2b3f',
        title: {
          text: 'Labor Day Transportation',
          fontColor: '#7d798d',
          fontSize: '14px',
          textAlign: 'left'
        },
        plot: {
          valueBox: {
            text: '%t\n%npv%',
            placement: 'out'
          },
          borderColor: 'none'
        },
        series: [{
            text: 'Auto',
            values: [85],
            backgroundColor: '#7121ea'
          },
          {
            text: 'Air',
            values: [8],
            backgroundColor: '#ee98d0'
          },
          {
            text: 'Boat',
            values: [7],
            backgroundColor: '#30b8ea'
          },
        ],
      };

      let chartConfigBar = {
        type: 'bar',
        backgroundColor: '#2f2b3f',
        title: {
          text: 'Yearly Users',
          fontColor: '#7d798d',
          fontSize: '14px',
          textAlign: 'left',
        },
        scaleX: {
          labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Jun', 'Jul', 'Aug'],
          lineColor: 'none',
          tick: {
            visible: false,
          },
        },
        scaleY: {
          values: '0:100:20',
          labels: ['20k', '40k', '60k', '80k', '100k', '120k'],
          guide: {
            visible: false,
          },
          lineColor: 'none',
          tick: {
            visible: false,
          },
        },
        series: [{
            values: [100, 20, 90, 80, 80, 50, 30],
            backgroundColor: '#7f70ce',
            barWidth: '5px',
          },
          {
            values: [20, 10, 20, 50, 50, 40, 70],
            backgroundColor: '#ee98d0',
            barWidth: '5px',
          },
          {
            values: [30, 20, 40, 60, 40, 60, 30],
            backgroundColor: '#30b8ea',
            barWidth: '5px',
          },
        ],
      };

      let chartConfigHBar = {
        type: 'hbar',
        backgroundColor: '#2f2b3f',
        title: {
          text: 'By Country',
          fontColor: '#7d798d',
          fontSize: '14px',
          textAlign: 'left',
        },
        plotarea: {
          margin: '25% 45% 20% 8%',
        },
        scaleX: {
          values: ['US', 'France', 'India', 'Colombia'],
          guide: {
            visible: false,
          },
          item: {
            fontSize: '10px',
          },
          lineColor: 'none',
          tick: {
            visible: false,
          },
        },
        scaleY: {
          guide: {
            visible: false,
          },
          item: {
            visible: false,
          },
          lineColor: 'none',
          tick: {
            visible: false,
          },
        },
        series: [{
            values: [5, 6, 7, 5.5],
            backgroundColor: '#7f70ce',
            barWidth: '5px',
          },
          {
            values: [5.5, 6.2, 7.5, 5.7],
            backgroundColor: '#5ab0d0',
            barWidth: '5px',
          },
          {
            values: [8, 8, 8, 8],
            backgroundColor: '#3f3c4f',
            barWidth: '5px',
          },
        ],
      };

      // render chart
      zingchart.render({
        id: 'myChart1',
        data: chartConfigPie,
        height: '100%',
        width: '100%',
      });

      zingchart.render({
        id: 'myChart2',
        data: chartConfigLine,
        height: '100%',
        width: '100%',
      });

      zingchart.render({
        id: 'myChart3',
        data: chartConfigHBar,
        height: '100%',
        width: '100%',
      });

      zingchart.render({
        id: 'myChart4',
        data: chartConfigBar,
        height: '100%',
        width: '100%',
      });

      zingchart.render({
        id: 'myChart5',
        data: chartConfigPie,
        height: '100%',
        width: '100%',
      });

      zingchart.render({
        id: 'myChart6',
        data: chartConfigPie,
        height: '100%',
        width: '100%',
      });
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>
    <!-- CHART CONTAINER -->
    <div class="container">
      <div id="myChart2" class="chart--container line-chart"></div>
      <div id="myChart3" class="chart--container hbar-chart"></div>
      <div id="myChart4" class="chart--container bar-chart"></div>
      <div id="myChart1" class="chart--container pie-chart"></div>
      <div id="myChart5" class="chart--container filler-chart-one"></div>
      <div id="myChart6" class="chart--container filler-chart-two"></div>
      <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  	</div>
  </body>
</html>

// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content

  // full ZingChart schema can be found here:
  // https://www.zingchart.com/docs/api/json-configuration/
  let chartConfigLine = {
    type: 'line',
    backgroundColor: '#2f2b3f',
    title: {
      text: 'Active Users',
      fontColor: '#7d798d',
      fontSize: '14px',
      textAlign: 'left',
    },
    plot: {
      aspect: 'spline',
    },
    scaleX: {
      values: ['Aug 1', 'Aug 10', 'Aug 17'],
      lineColor: 'none',
      tick: {
        visible: false,
      },
    },
    scaleY: {
      guide: {
        lineColor: 'none',
      },
      lineColor: 'none',
      tick: {
        visible: false,
      },
    },
    series: [
      {
        values: [
          [0, 1],
          [0.2, 1.2],
          [0.4, 0.7],
          [1, 0.5],
          [1.2, 2],
          [1.4, 1.5],
          [1.6, 3],
          [2, 4],
        ],
        lineColor: '#5f5596',
        marker: {
          backgroundColor: '#e496d5',
          borderColor: 'none',
          size: '4%',
        },
      },
    ],
  };

  let chartConfigPie = {
    type: 'pie3d',
    backgroundColor: '#2f2b3f',
    title: {
      text: 'Labor Day Transportation',
      fontColor: '#7d798d',
      fontSize: '14px',
      textAlign: 'left'
    },
    plot: {
      valueBox: {
        text: '%t\n%npv%',
        placement: 'out'
      },
      borderColor: 'none'
    },
    series: [
      {
        text: 'Auto',
        values: [85],
        backgroundColor: '#7121ea'
      },
      {
        text: 'Air',
        values: [8],
        backgroundColor: '#ee98d0'
      },
      {
        text: 'Boat',
        values: [7],
        backgroundColor: '#30b8ea'
      },
    ],
  };

  let chartConfigBar = {
    type: 'bar',
    backgroundColor: '#2f2b3f',
    title: {
      text: 'Yearly Users',
      fontColor: '#7d798d',
      fontSize: '14px',
      textAlign: 'left',
    },
    scaleX: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Jun', 'Jul', 'Aug'],
      lineColor: 'none',
      tick: {
        visible: false,
      },
    },
    scaleY: {
      values: '0:100:20',
      labels: ['20k', '40k', '60k', '80k', '100k', '120k'],
      guide: {
        visible: false,
      },
      lineColor: 'none',
      tick: {
        visible: false,
      },
    },
    series: [
      {
        values: [100, 20, 90, 80, 80, 50, 30],
        backgroundColor: '#7f70ce',
        barWidth: '5px',
      },
      {
        values: [20, 10, 20, 50, 50, 40, 70],
        backgroundColor: '#ee98d0',
        barWidth: '5px',
      },
      {
        values: [30, 20, 40, 60, 40, 60, 30],
        backgroundColor: '#30b8ea',
        barWidth: '5px',
      },
    ],
  };

  let chartConfigHBar = {
    type: 'hbar',
    backgroundColor: '#2f2b3f',
    title: {
      text: 'By Country',
      fontColor: '#7d798d',
      fontSize: '14px',
      textAlign: 'left',
    },
    plotarea: {
      margin: '25% 45% 20% 8%',
    },
    scaleX: {
      values: ['US', 'France', 'India', 'Colombia'],
      guide: {
        visible: false,
      },
      item: {
        fontSize: '10px',
      },
      lineColor: 'none',
      tick: {
        visible: false,
      },
    },
    scaleY: {
      guide: {
        visible: false,
      },
      item: {
        visible: false,
      },
      lineColor: 'none',
      tick: {
        visible: false,
      },
    },
    series: [
      {
        values: [5, 6, 7, 5.5],
        backgroundColor: '#7f70ce',
        barWidth: '5px',
      },
      {
        values: [5.5, 6.2, 7.5, 5.7],
        backgroundColor: '#5ab0d0',
        barWidth: '5px',
      },
      {
        values: [8, 8, 8, 8],
        backgroundColor: '#3f3c4f',
        barWidth: '5px',
      },
    ],
  };

  // render chart
  zingchart.render({
    id: 'myChart1',
    data: chartConfigPie,
    height: '100%',
    width: '100%',
  });

  zingchart.render({
    id: 'myChart2',
    data: chartConfigLine,
    height: '100%',
    width: '100%',
  });

  zingchart.render({
    id: 'myChart3',
    data: chartConfigHBar,
    height: '100%',
    width: '100%',
  });

  zingchart.render({
    id: 'myChart4',
    data: chartConfigBar,
    height: '100%',
    width: '100%',
  });

  zingchart.render({
    id: 'myChart5',
    data: chartConfigPie,
    height: '100%',
    width: '100%',
  });

  zingchart.render({
    id: 'myChart6',
    data: chartConfigPie,
    height: '100%',
    width: '100%',
  });
});

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

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

.zc-ref {
  display: none;
}

.container {
  background-color: #221f2d;
  padding: 10px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
}

.pie-chart {
	grid-column: 4;
  grid-row: 2;
}

.line-chart {
	grid-column: 1 / 2;
  grid-row: 1;
}

.hbar-chart {
	grid-column: 2 / 5;
  grid-row: 1;
}

.bar-chart {
	grid-column: 1 / 4;
  grid-row: 2;
}

.filler-chart-one {
	grid-column: 1 / 3;
  grid-row: 3;
}

.filler-chart-two {
	grid-column: 3/ 5;
  grid-row: 3;
}

Bar Chart with Zooming 18/281 Area Line Chart

Dark Dashboard Template

Related Documentation: