123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- <!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>Bar Chart with Pattern Fill</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">
- <div id="chart">
- <ReactApexChart options={this.state.options} series={this.state.series} type="bar" height={350} />
- </div>
- </div>
- <script type="text/babel">
- class ApexChart extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
-
- series: [{
- name: 'Marine Sprite',
- data: [44, 55, 41, 37, 22, 43, 21]
- }, {
- name: 'Striking Calf',
- data: [53, 32, 33, 52, 13, 43, 32]
- }, {
- name: 'Tank Picture',
- data: [12, 17, 11, 9, 15, 11, 20]
- }, {
- name: 'Bucket Slope',
- data: [9, 7, 5, 8, 6, 9, 4]
- }],
- options: {
- chart: {
- type: 'bar',
- height: 350,
- stacked: true,
- dropShadow: {
- enabled: true,
- blur: 1,
- opacity: 0.25
- }
- },
- plotOptions: {
- bar: {
- horizontal: true,
- barHeight: '60%',
- },
- },
- dataLabels: {
- enabled: false
- },
- stroke: {
- width: 2,
- },
- title: {
- text: 'Compare Sales Strategy'
- },
- xaxis: {
- categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
- },
- yaxis: {
- title: {
- text: undefined
- },
- },
- tooltip: {
- shared: false,
- y: {
- formatter: function (val) {
- return val + "K"
- }
- }
- },
- fill: {
- type: 'pattern',
- opacity: 1,
- pattern: {
- style: ['circles', 'slantedLines', 'verticalLines', 'horizontalLines'], // string or array of strings
-
- }
- },
- states: {
- hover: {
- filter: 'none'
- }
- },
- legend: {
- position: 'right',
- offsetY: 40
- }
- },
-
-
- };
- }
-
- render() {
- return (
- <div>
- <div id="chart">
- <ReactApexChart options={this.state.options} series={this.state.series} type="bar" height={350} />
- </div>
- <div id="html-dist"></div>
- </div>
- );
- }
- }
- const domContainer = document.querySelector('#app');
- ReactDOM.render(React.createElement(ApexChart), domContainer);
- </script>
-
- </body>
- </html>
|