Gallery Back to Gallery

Stock Trading Phone Dashboard

Please enable JavaScript to see the interactive demo.

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

My Watch List

DIS-USD.SW Walt Disney Co.

$108.16 0.19 (18%)

Open
106.93
High
108.40
Low
106.81

<!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>
    /* Defaults */
    :root {
      --gray: #f0f7fa;
      --white: #fff;
      --lightBlue: #23bef1;
      --pink: #ff407d;
      --navyBlue: #253d61;
      --green: #00d77d;
      --shadow: #dbe6ea;
    }

    .zc-body {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--gray);
      color: var(--navyBlue);
      font-family: Nunito;
      font-size: 16px;
      line-height: 24px;
    }

    /* Main Content */
    .disney-device {
      margin: 1.5rem auto;
      padding: 0 0 1.5rem;
      width: 100%;
      max-width: 375px;
      display: flex;
      flex-direction: column;
      background-color: var(--gray);
      border-radius: 40px;
      border: 16px solid var(--white);
      box-shadow: 0 10px 15px 2px var(--shadow);
      text-align: center;
    }

    /* Header */
    .disney-header {
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--navyBlue);
      font-size: 1rem;
    }

    /* Body */
    .disney-body {
      margin: 0 auto;
      width: 100%;
      max-width: 310px;
      display: flex;
      flex-direction: column;
      flex: 1;
      background-color: var(--white);
      color: var(--navyBlue);
      border-radius: 16px;
      box-shadow: 0 2px 2px 2px var(--shadow);
    }

    /* Intro */
    .disney-intro {
      padding-top: 1rem;
      min-height: 150px;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }

    .disney-logo {
      max-height: 75px;
    }

    .disney-stock {
      font-weight: normal;
      font-size: 18px;
    }

    .disney-name {
      padding-top: 1rem;
      opacity: 0.8;
      font-size: 12px;
    }

    /* Chart */
    .disney-chart {
      min-height: 150px;
    }

    /* Wrap */
    .disney-body-wrap {
      padding-bottom: 1rem;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    /* X Axis */
    .disney-axis {
      margin: 0 auto;
      padding: 0;
      width: 90%;
      display: flex;
      justify-content: space-around;
      font-size: 12px;
    }

    .disney-axis li {
      margin: 0 !important;
      list-style: none;
    }

    /* Price */
    .disney-price {
      padding-top: .5rem;
      display: block;
      font-weight: normal;
      font-size: 24px;
    }

    .disney-price-change {
      color: var(--green);
      font-size: 12px;
    }

    .disney-price-avg {
      margin: 0 auto;
      padding: 0;
      width: 90%;
      display: flex;
      justify-content: space-around;
      font-size: 12px;
    }

    .disney-price-avg li {
      margin: 0 !important;
      list-style: none;
    }

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

<body class="zc-body">

  <div class="disney-device">

    <div class="disney-header">
      My Watch List
    </div>

    <div class="disney-body">

      <div class="disney-intro">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/disney.svg" class="disney-logo">
        <strong class="disney-stock">DIS-USD.SW</strong>
        <span class="disney-name">Walt Disney Co.</span>
      </div>

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

      <div class="disney-body-wrap">

        <ul class="disney-axis">
          <li>1D</li>
          <li>5D</li>
          <li>3M</li>
          <li>6M</li>
          <li>1Y</li>
          <li>5Y</li>
          <li>Max</li>
        </ul>

        <strong class="disney-price">$108.16</strong>

        <span class="disney-price-change">0.19 (18%)</span>

        <ul class="disney-price-avg">
          <li>Open<br>106.93</li>
          <li>High<br>108.40</li>
          <li>Low<br>106.81</li>
        </ul>
      </div>
    </div>

  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartConfig = {
      type: 'line',
      plot: {
        aspect: 'spline'
      },
      plotarea: {
        margin: '0px 0px 0px 0px'
      },
      scaleX: {
        visible: false
      },
      scaleY: {
        visible: false
      },
      tooltip: {
        visible: false
      },
      series: [{
        values: [5, 7, 5, 15, 7, 18, 12, 21],
        lineColor: 'var(--lightBlue)',
        lineWidth: 4,
        marker: {
          visible: false
        }
      }]
    };

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      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 class="zc-body">

  <div class="disney-device">

    <div class="disney-header">
      My Watch List
    </div>

    <div class="disney-body">

      <div class="disney-intro">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/disney.svg" class="disney-logo">
        <strong class="disney-stock">DIS-USD.SW</strong>
        <span class="disney-name">Walt Disney Co.</span>
      </div>

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

      <div class="disney-body-wrap">
          
        <ul class="disney-axis">
          <li>1D</li>
          <li>5D</li>
          <li>3M</li>
          <li>6M</li>
          <li>1Y</li>
          <li>5Y</li>
          <li>Max</li>
        </ul>
    
        <strong class="disney-price">$108.16</strong>

        <span class="disney-price-change">0.19 (18%)</span>

        <ul class="disney-price-avg">
          <li>Open<br>106.93</li>
          <li>High<br>108.40</li>
          <li>Low<br>106.81</li>
        </ul>
      </div>
    </div>

  </div>

</body>
</html>

let chartConfig = {
  type: 'line',
  plot: {
    aspect: 'spline'
  },
  plotarea: {
    margin: '0px 0px 0px 0px'
  },
  scaleX: {
    visible: false
  },
  scaleY: {
    visible: false
  },
  tooltip: {
    visible: false
  },
  series: [
    {
      values: [5, 7, 5, 15, 7, 18, 12, 21],
      lineColor: 'var(--lightBlue)',
      lineWidth: 4,
      marker: {
        visible: false
      }
    }
  ]
};

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

/* Defaults */
:root {
  --gray: #f0f7fa;
  --white: #fff;
  --lightBlue: #23bef1;
  --pink: #ff407d;
  --navyBlue: #253d61;
  --green: #00d77d;
  --shadow: #dbe6ea;
}

.zc-body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--gray);
  color: var(--navyBlue);
  font-family: Nunito;
  font-size: 16px;
  line-height: 24px;
}

/* Main Content */
.disney-device {
  margin: 1.5rem auto;
  padding:0 0 1.5rem;
  width: 100%;
  max-width: 375px;
  display: flex;
  flex-direction: column;
  background-color: var(--gray);
  border-radius: 40px;
  border: 16px solid var(--white);
  box-shadow: 0 10px 15px 2px var(--shadow);
  text-align: center;
}

/* Header */
.disney-header {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navyBlue);
  font-size: 1rem;
}

/* Body */
.disney-body {
  margin:0 auto;
  width: 100%;
  max-width: 310px;
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: var(--white);
  color: var(--navyBlue);
  border-radius: 16px;
  box-shadow: 0 2px 2px 2px var(--shadow);
}

/* Intro */
.disney-intro {
  padding-top:1rem;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.disney-logo { max-height:75px; }
.disney-stock { font-weight:normal; font-size:18px; }
.disney-name { padding-top:1rem; opacity:0.8; font-size:12px; }

/* Chart */
.disney-chart { min-height:150px; }

/* Wrap */
.disney-body-wrap { 
  padding-bottom: 1rem;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/* X Axis */
.disney-axis {
  margin: 0 auto;
  padding: 0;
  width: 90%;
  display: flex;
  justify-content: space-around;
  font-size: 12px;
}
.disney-axis li { margin:0 !important; list-style:none; }

/* Price */
.disney-price { padding-top:.5rem; display:block; font-weight:normal; font-size:24px; }
.disney-price-change { color:var(--green); font-size:12px; }
.disney-price-avg { 
  margin: 0 auto;
  padding: 0;
  width: 90%;
  display: flex;
  justify-content: space-around;
  font-size:12px;
}
.disney-price-avg li { margin:0 !important; list-style:none; }

.zc-ref { display:none; }

Mobile Fitness Dashboard 32/275 Delivery Dashboard

Stock Trading Phone Dashboard

Related Documentation: