Taiftech-LLC
/
admin.dukany.io


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Stacked Column with line</title>

    <link href="../../assets/styles.css" rel="stylesheet" />

    <style>
      
        #chart {
      max-width: 650px;
      margin: 35px auto;
    }
      
    </style>

    <script>
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
        )
    </script>

    
    <script src="https://cdn.jsdelivr.net/npm/react@16.12/umd/react.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.12/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prop-types@15.7.2/prop-types.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-apexcharts@1.3.6/dist/react-apexcharts.iife.min.js"></script>
    

    
  </head>

  <body>
    
    <div id="app"></div>

    <div id="html">
      &lt;div id=&quot;chart&quot;&gt;
  &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;line&quot; /&gt;
&lt;/div&gt;
    </div>

    <script type="text/babel">
      class ApexChart extends React.Component {
        constructor(props) {
          super(props);

          this.state = {
          
            series: [
              {
                "name": "Line",
                "type": "line",
                "data": [
                  37,
                  38.3,
                  33.01,
                  30,
                  29.7,
                  30,
                  35.2,
                  44,
                  45,
                  41,
                  22,
                  22.5,
                  29.1,
                  25.5,
                  41.2,
                  43.8,
                  39,
                  23,
                  26,
                  22,
                  34,
                  37,
                  43,
                  41,
                  17
                ]
              },
              {
                "name": "Bar1",
                "type": "bar",
                "data": [
                  -1.57,
                  -1.83,
                  -0.29,
                  2,
                  0.23,
                  3,
                  0,
                  -0.77,
                  0,
                  0,
                  0,
                  -0.16,
                  -0.5,
                  -0.75,
                  -0.93,
                  -0.93,
                  -0.45,
                  0,
                  0,
                  -0.23,
                  -0.95,
                  -1.12,
                  -0.51,
                  0.76
                ]
              },
              {
                "name": "Bar2",
                "type": "bar",
                "data": [
                  -2.99,
                  -0.43,
                  0.39,
                  2.8,
                  0.23,
                  1.2,
                  -0.06,
                  -2.96,
                  -2.74,
                  -2.58,
                  -1.79,
                  -2.16,
                  -1.9,
                  -1.75,
                  -2,
                  -2.16,
                  -1.75,
                  -1.9,
                  -2.74,
                  -2.58,
                  -3.8,
                  -1.24,
                  -0.01,
                  1.89
                ]
              },
              {
                "name": "Bar3",
                "type": "bar",
                "data": [
                  0.09,
                  4,
                  4.83,
                  6.86,
                  3.86,
                  5,
                  1.7,
                  -1.21,
                  0,
                  0.02,
                  0.07,
                  -0.15,
                  -0.09,
                  0,
                  -0.61,
                  -1.75,
                  0,
                  -0.43,
                  -1.5,
                  -0.66,
                  -3.06,
                  0.06,
                  0.15,
                  1.48
                ]
              },
              {
                "name": "bar4",
                "type": "bar",
                "data": [
                  5.95,
                  5.86,
                  0.92,
                  -1.2,
                  -2.73,
                  -0.32,
                  0.12,
                  -0.55,
                  0.78,
                  0,
                  -1.73,
                  -2.52,
                  -1.26,
                  -0.8,
                  -0.75,
                  0,
                  -3,
                  0,
                  0.29,
                  0.3
                ]
              }
            ],
            options: {
              colors: [
                '#6a6ba5',
                '#f9a867',
                '#2a6b9b',
                '#6c98b7',
                '#abc4d6',
                '#d5e2eb'
              ],
              chart: {
                height: '350',
                width: '90%',
                type: 'line',
                stacked: 'true',
                zoom: {
                  enabled: true,
                  type: 'x'
                }
              },
              tooltip: {
                followCursor: true,
                shared: false
              },
              responsive: [
                {
                  breakpoint: 480
                }
              ],
              markers: {
                size: 0,
                fillOpacity: 0,
                strokeOpacity: 0
              },
              stroke: {
                width: 2
              },
              xaxis: {
                categories: [
                  1,
                  2,
                  3,
                  4,
                  5,
                  6,
                  7,
                  8,
                  9,
                  10,
                  11,
                  12,
                  13,
                  14,
                  15,
                  16,
                  17,
                  18,
                  19,
                  20,
                  21,
                  22,
                  23,
                  24,
                  25
                ],
                type: 'numeric',
                tickPlacement: 'on',
                tickAmount: 'dataPoints',
                labels: {
                  showDuplicates: false,
                  formatter: function(value) {
                    return value.toFixed(0)
                  }
                }
              },
              yaxis: [
                {
                  seriesName: 'Line',
                  opposite: true
                },
                {
                  seriesName: 'Bar1'
                },
                {
                  seriesName: 'Bar1',
                  show: false
                },
                {
                  seriesName: 'Bar1',
                  show: false
                },
                {
                  seriesName: 'Bar1',
                  show: false
                }
              ],
              legend: {
                showForSingleSeries: true
              },
              fill: {
                opacity: 1
              }
            },
          
          
          };
        }

      

        render() {
          return (
            <div>
              <div id="chart">
                <ReactApexChart options={this.state.options} series={this.state.series} type="line" />
              </div>
              <div id="html-dist"></div>
            </div>
          );
        }
      }

      const domContainer = document.querySelector('#app');
      ReactDOM.render(React.createElement(ApexChart), domContainer);
    </script>

    
  </body>
</html>