Share Price Example

Share Price Example

Code for Example

<style>
:root {
  --primary-color: #080e42;
}
.ProactiveDataTable {
  margin-bottom:20px;
}
.pa-tabs .tab-button {
  font-weight:normal;
  font-size:14px;
  border:1px solid #EFEFEF;
  border-bottom:0px;
  border-radius:5px 5px 0 0;
}
.pa-tabs .tab-button.active {
  font-weight:bold;
	border: none;
	background: var(--primary-color);
	color: #fefefe;
}
.ProactiveDataTable dl dd {
    background: #FFF;
}
.pa-tabs .tab-content {
    background: #FFF;
}
.ProactiveDataTable dl dt {
  margin: 0;
  background: var(--primary-color);
  height: 50%;
  display: block;
  position: relative;
  display: grid;
  justify-items: center;
  align-items: center;
  color: #FEFEFE;
}           
    .header-box {
        border:1px solid #CCC;
        border-radius:5px;
        padding:5px 10px;
        color:#000;
        font-weight:bold;
        max-width:240px;
        text-align:center;
    }
    .header-box span {
        font-weight: normal;
    }
    .show-change-arrow .proactive-positive {
        display:inline-block;
        position:relative;
    }
    .show-change-arrow .proactive-negative {
        display:inline-block;
        position:relative;
    }
    .show-change-arrow .proactive-positive::after {
        content: "";
        width: 1px;
        background-color: transparent;
        height: 1px;
        top: -webkit-calc(50% - 4px);
        top: calc(50% - 4px);
        border: 7px solid transparent;
        border-bottom: 8px solid #31d0aa;
        position: relative;
        top: -15px;
        left: 5px;        
    }  
    .show-change-arrow .proactive-negative::after {
        content: "";
        width: 1px;
        background-color: transparent;
        height: 1px;
        top: -webkit-calc(50% - 4px);
        top: calc(50% - 4px);
        border: 7px solid transparent;
        border-top: 8px solid #db3030;
        position: relative;
        top: 15px;
        left: 5px;        
    }     

</style>

<div class="ProactiveDataTable">
<dl>
  <dt><h2>Buy</h2></dt>
  <dd><span data-proactive="bid" data-decimal="3"></span></dd>
</dl>
<dl>
  <dt><h2>Sell</h2></dt>
  <dd><span data-proactive="ask" data-decimal="3"></span></dd>
</dl>
<dl>
  <dt><h2>First</h2></dt>
  <dd><span data-proactive="open" data-decimal="3"></span></dd>
</dl>
<dl>
  <dt><h2>High</h2></dt>
  <dd><span data-proactive="high" data-decimal="3"></span></dd>
</dl>
<dl>
  <dt><h2>Low</h2></dt>
  <dd><span data-proactive="low" data-decimal="3"></span></dd>
</dl>
<dl>
  <dt><h2>Last</h2></dt>
  <dd><span data-proactive="close" data-decimal="3"></span></dd>
</dl>
<dl>
  <dt><h2>MktPrice</h2></dt>
  <dd><span data-proactive="price" data-decimal="3"></span></dd>
</dl>
<dl>
  <dt><h2>Change</h2></dt>
  <dd><span data-proactive="change" data-decimal="3"></span></dd>
</dl>
<dl>
  <dt><h2>Percent Change</h2></dt>
  <dd><span data-proactive="pctChange" data-decimal="3"></span></dd>
</dl>
<dl>
  <dt><h2>Volume</h2></dt>
  <dd><span data-proactive="volume" data-decimal="3"></span></dd>
</dl>
<dl>
  <dt><h2>Total Trades</h2></dt>
  <dd><span data-proactive="trades" data-decimal="3"></span></dd>
</dl>
<dl>
  <dt><h2>MktCap</h2></dt>
  <dd><span data-proactive="marketCap" data-decimal="3"></span></dd>
</dl>
</div>
  

<div class="pa-tabs">
  <div class="tab-buttons">
    <button class="tab-button active" data-tab="tab1">Security Price</button>
    <button class="tab-button" data-tab="tab2">Investment Calculator</button>
    <button class="tab-button" data-tab="tab3">Historical Prices</button>
  </div>
  <div class="tab-content active" id="tab1">
    
      <div data-proactive="charts" id="chartContainer" autosize  
      barfill="#EcEcEc" bgcolor="white" 
      linefill="#E9ECF1" linestroke="#2C3691" 
      markerRadius="2"
      navigator-enable="true"       
      rangeselector-enable="true" defaultRange="1Y"
      title="" subtitle="" volumelabel="Volume" 
      height="500" tooltipWidth="300px">
    </div>    
    
    
  </div>
  <div class="tab-content" id="tab2">
    
      <div data-proactive="priceCalculator" id="priceCalculator1" class="proactive-price-calculator-container"
        title="" >
    </div>
    
  </div>
  <div class="tab-content" id="tab3">
    
    <div data-proactive="historicalCalculator" id="historicalCalculator1" class="proactive-historical-price-calculator-container"
        title="" >
    </div>
    
  </div>
</div>