| <!doctype html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta content="IE=edge" http-equiv="X-UA-Compatible">
|
| <meta content="width=device-width, initial-scale=1" name="viewport">
|
| <title>anychart.core.cartesian.series.Box.hatchFill set asFunc asPattern</title>
|
| <link href="https://playground.anychart.com/api/core/cartesian/series/_samples/anychart.core.cartesian.series.Box.hatchFill_set_asPattern/iframe" rel="canonical">
|
| <meta content="Box Chart,Box and Whisker Plot,Graphics,Statistical Data" name="keywords">
|
| <meta content="AnyChart - JavaScript Charts designed to be embedded and integrated" name="description">
|
| |
| |
| |
|
|
| <link href="_deps/cdn.anychart.com/releases/8.14.1/css/anychart-ui.min.css" rel="stylesheet" type="text/css">
|
| <style>html, body, #container {
|
| width: 100%;
|
| height: 100%;
|
| margin: 0;
|
| padding: 0;
|
| }</style>
|
| </head>
|
| <body>
|
| <div id="container"></div>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.1/js/anychart-base.min.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.1/js/anychart-exports.min.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.1/js/anychart-ui.min.js"></script>
|
| <script type="text/javascript">anychart.onDocumentReady(function () {
|
| var stage = anychart.graphics.create('container');
|
|
|
| var pattern = stage.pattern(new anychart.graphics.math.Rect(0, 0, 20, 20));
|
| pattern.star5(11, 7, 8).stroke('#ffffff');
|
|
|
| var data = [
|
| {x: 'January', low: 760, q1: 801, median: 848, q3: 895, high: 965},
|
| {x: 'February', low: 733, q1: 853, median: 939, q3: 980, high: 1080, outliers: [1120, 630]},
|
| {x: 'March', low: 760, q1: 801, median: 848, q3: 895, high: 965, outliers: [650]},
|
| {x: 'April', low: 724, q1: 802, median: 806, q3: 871, high: 950, outliers: [1000, 600]}
|
| ];
|
|
|
| var chart = anychart.box(data);
|
|
|
| var series = chart.getSeries(0);
|
|
|
|
|
| series.hatchFill(pattern);
|
|
|
| chart.title('Set hatch fill as a pattern');
|
| chart.container(stage);
|
| chart.draw();
|
| });</script>
|
| </body>
|
| </html> |
