### Basic Pie Chart Setup

Source: https://github.com/anychart/docs.anychart.com/blob/develop/samples/BCT_Pie_Chart_01.html

Defines the container dimensions and initializes the chart with sample data.

```css
html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; }
```

```javascript
anychart.onDocumentReady(function () { // create data var data = [ {x: "A", value: 637166}, {x: "B", value: 721630}, {x: "C", value: 148662}, {x: "D", value: 78662}, {x: "E", value: 90000} ]; // create a chart and set the data var chart = anychart.pie(data); // set the chart title chart.title("Pie Chart: Basic Sample"); // set the container id chart.container("container"); // initiate drawing the chart chart.draw(); });
```

--------------------------------

### Get Zoom Limits Ratio

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Common_Settings/Scroller.md

Retrieve the current start and end ratios of the zoom range to display or process the visible data segment.

```javascript
// set the xZoom
var xZoom = chart.xZoom();

// Zooms series by defined points count
xZoom.setToPointsCount(5);

// get the limits ratio
chart.title("The chart shows the part from " + xZoom.getStartRatio() + " and ends at " + xZoom.getEndRatio());
```

--------------------------------

### Full Stock Chart with SMA Indicator

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Stock_Charts/Technical_Indicators/Overview.md

Complete example demonstrating data table setup, mapping, chart creation, and the addition of an SMA indicator.

```javascript
anychart.onDocumentReady(function () {
var table, mapping, chart;

table = anychart.data.table();
table.addData([
	['2015-12-24','511.53', '514.98', '505.79', '506.40'],
	['2015-12-25','512.53', '514.88', '505.69', '507.34'],
	['2015-12-26','511.83', '514.98', '505.59', '506.23'],
	['2015-12-27','511.22', '515.30', '505.49', '506.47'],
	['2015-12-28','510.35', '515.72', '505.23', '505.80'],
	['2015-12-29','510.53', '515.86', '505.38', '508.25'],
	['2015-12-30','511.43', '515.98', '505.66', '507.45'],
	['2015-12-31','511.50', '515.33', '505.99', '507.98'],
	['2016-01-01','511.32', '514.29', '505.99', '506.37'],
	['2016-01-02','511.70', '514.87', '506.18', '506.75'],
	['2016-01-03','512.30', '514.78', '505.87', '508.67'],
	['2016-01-04','512.50', '514.77', '505.83', '508.35'],
	['2016-01-05','511.53', '516.18', '505.91', '509.42'],
	['2016-01-06','511.13', '516.01', '506.00', '509.26'],
	['2016-01-07','510.93', '516.07', '506.00', '510.99'],
	['2016-01-08','510.88', '515.93', '505.22', '509.95'],
	['2016-01-09','509.12', '515.97', '505.15', '510.12'],
	['2016-01-10','508.53', '516.13', '505.66', '510.42'],
	['2016-01-11','508.90', '516.24', '505.73', '510.40']	
]);
  
// mapping the data  
mapping = table.mapAs();
mapping.addField('open', 1, 'first');
mapping.addField('high', 2, 'max');
mapping.addField('low', 3, 'min');
mapping.addField('close', 4, 'last');
mapping.addField('value', 4, 'last');

// defining the chart type
chart = anychart.stock();
	  
// set the series type
chart.plot(0).ohlc(mapping).name('ACME Corp.');

// add sma indicator
chart.plot(0).sma(mapping, 10, "line");

// setting the chart title
chart.title('AnyStock Basic Sample with SMA indicator');
	  
chart.container('container');
chart.draw();
});
```

--------------------------------

### Initialize AnyChart and Create Column Charts

Source: https://github.com/anychart/docs.anychart.com/blob/develop/samples/AS_Background_06.html

Sets up the AnyChart environment and creates four column charts with different background corner configurations. Ensure the 'container' element is present in your HTML.

```javascript
html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; }

anychart.onDocumentReady(function () {
    // data
    var data = [
        ["P1", 16, 20],
        ["P2", 12, 18],
        ["P3", 9, 14]
    ];

    var stage = anychart.graphics.create("container");

    // title
    var title = anychart.standalones.title();
    title.parentBounds(0, 0, stage.width(), stage.height()*0.1);
    title.text("Corners Types");
    title.container(stage);
    title.draw();

    // Chart without background corners adjustment
    var chart_1 = anychart.column();
    chart_1.data(data);
    // setting title
    chart_1.title("Default Corners");
    // setting stroke for chart container
    var defaultBackground = chart_1.background();
    defaultBackground.stroke("3 red");
    // set corner type
    defaultBackground.cornerType("none");
    // setting position and bounds
    chart_1.bounds("1%", "10%", "48%", "44%");
    // draw chart
    chart_1.container(stage);
    chart_1.draw();

    // chart with round corners
    var chart_2 = anychart.column();
    chart_2.data(data);
    chart_2.title("Round Corners");
    chart_2.bounds("51%", "10%", "48%", "44%");

    // chart background
    var roundBackground = chart_2.background();
    roundBackground.stroke("3 red");
    // set corner type
    roundBackground.cornerType("round");
    // apply corner type only for top-left and bottom-right corners.
    roundBackground.corners(10, 0, 10, 0);
    // draw chart
    chart_2.container(stage);
    chart_2.draw();

    // chart with round inner background corners
    var chart_3 = anychart.column();
    chart_3.data(data);
    // chart title
    chart_3.title("Round Inner Corners");
    // chart size and position
    chart_3.bounds("1%", "55%", "48%", "44%");

    // adjust chart background
    var innerBackground = chart_3.background();
    // set stroke color and thickness
    innerBackground.stroke("3 red");
    // corner type
    innerBackground.cornerType("round-inner");
    // corner radius
    innerBackground.corners(10);
    // draw chart
    chart_3.container(stage);
    chart_3.draw();

    // chat with labels inside
    var chart_4 = anychart.column();
    chart_4.data(data);
    // chart title
    chart_4.title("Cut background Corner");
    // chart size and position
    chart_4.bounds("51%", "55%", "48%", "44%");

    // adjust background
    var cutBackground = chart_4.background();
    // set background stroke color and thickness
    cutBackground.stroke("3 red");
    // set corner type
    cutBackground.cornerType("cut");
    // set corner radius and apply it only to top corners
    cutBackground.corners(10, 10, 0, 0);
    // draw chart
    chart_4.container(stage);
    chart_4.draw();
});
```

--------------------------------

### Hover Adjacent Points on Hover

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Common_Settings/Event_Listeners.md

Listen for the 'pointsHover' event to get the hovered point's index and series. This example shows how to hover the adjacent points (previous and next) if they exist.

```javascript
chart.listen("pointsHover", function(event){
  // get hovered point
  var point = event.point;
  // get index of hovered point
  var index = point.getIndex();
  // get series of hovered point
  var series = point.getSeries();
  // unhover the series on point unhovering
  if (!point.hovered())return;
  // create array for further hovering
  var arrayToHover = [index];
  // checking existence of a point before hovered one
  if (series.getPoint(index-1).exists())
    // push the point for further hovering
    arrayToHover.push(index-1);
  // checking existence of a point after hovered one
  if (series.getPoint(index+1).exists())
    // push this point for further hovering
    arrayToHover.push(index+1);
  // hover points from the array
  series.hover(arrayToHover);
});
```

--------------------------------

### Initialize Stage and Title

Source: https://github.com/anychart/docs.anychart.com/blob/develop/samples/CMN_Async_02.html

Sets up the AnyChart stage and a standalone title. This code should be run when the document is ready.

```javascript
anychart.onDocumentReady(function () {
  stage = anychart.graphics.create("container");
  var customTitle = anychart.standalones.title();
  customTitle.text("Asynchronous/Synchronous Rendering");
  customTitle.parentBounds(0, "50%", 100, 100);
  customTitle.container(stage);
  customTitle.draw();
  charts = [];
});
```

--------------------------------

### Install Converter Requirements

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Maps/Amap_to_GeoJson.md

Install the necessary Python dependencies required by the converter using pip.

```bash
pip install -r requirements
```

--------------------------------

### Initialize Chart and Data Set

Source: https://github.com/anychart/docs.anychart.com/blob/develop/samples/WD_Data_Sets_13.html

Sets up the initial chart, data mapping, and interactivity settings.

```javascript
anychart.onDocumentReady(function () { // create data data = [ ["January", 12000], ["February", 15000], ["March", 16000], ["April", 14000], ["May", 10000] ]; // create a data set var dataSet = anychart.data.set(data); // map the data mapping = dataSet.mapAs({x: 0, value: 1}); // create a chart chart = anychart.column(); // create a series and set the data series = chart.column(mapping); /* prevent points from being selected when they are clicked on */ chart.interactivity().selectionMode("none"); /* prevent points from being deselected when a click happens outside of them */ chart.interactivity().unselectOnClickOutOfPoint(false); // set the chart title chart.title().useHtml(true); chart.title("Data Sets: Iterating<br><br>" + "<span style = 'color:#990000'>?</span>"); // set the container id chart.container("container"); // initiate drawing the chart chart.draw(); });
```

--------------------------------

### Initialize AnyChart Table with Theming

Source: https://github.com/anychart/docs.anychart.com/blob/develop/samples/AS_Fonts_03.html

Sets up the AnyChart environment with a default theme and creates a standalone table instance.

```javascript
anychart.onDocumentReady(function () {
  anychart.theme({
    defaultFontSettings: {
      fontColor: "#000"
    }
  });
  var stage = anychart.graphics.create("container");
  var table = anychart.standalones.table();
```

--------------------------------

### Install Geckodriver for Mac

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Common_Settings/Server-Side_Rendering.md

Use Homebrew to install the geckodriver required for Firefox headless mode on macOS.

```bash
brew install geckodriver
```

--------------------------------

### Install Chromedriver for Mac

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Common_Settings/Server-Side_Rendering.md

Use Homebrew to install the chromedriver required for Chrome or Chromium headless mode on macOS.

```bash
brew install chromedriver
```

--------------------------------

### Create Stock Chart

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Stock_Charts/Quick_Start.md

Initialize the stock chart instance.

```javascript
chart = anychart.stock();
```

--------------------------------

### Set Pie Chart Start Angle

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Basic_Charts/Pie_Chart.md

Adjust the starting position of the first slice by providing an angle in degrees.

```javascript
// set the start angle
chart.startAngle(90);
```

--------------------------------

### Initialize and Draw Gantt Project Chart

Source: https://github.com/anychart/docs.anychart.com/blob/develop/samples/GANTT_Data_Grid_Column_Presets_01.html

This snippet demonstrates the basic setup for creating a Gantt Project chart. It includes data preparation, chart instantiation, data assignment, container setting, and drawing the chart. Ensure the 'container' element exists in your HTML.

```javascript
anychart.onDocumentReady(function () {
  // create data
  var data = [
    { id: "1", name: "Development", actualStart: 1515974400000, actualEnd: 1520640000000, children: [
      { id: "1_1", name: "Analysis", actualStart: 1515974400000, actualEnd: 1516838400000 },
      { id: "1_2", name: "Design", actualStart: 1516406400000, actualEnd: 1517702400000 },
      { id: "1_3", name: "Meeting", actualStart: 1517788800000, actualEnd: 1517788800000 },
      { id: "1_4", name: "Implementation", actualStart: 1517788800000, actualEnd: 1519430400000 },
      { id: "1_5", name: "Testing", actualStart: 1519516800000, actualEnd: 1520640000000 }
    ] }
  ];

  // create a data tree
  var treeData = anychart.data.tree(data, "as-tree");

  // create a chart
  var chart = anychart.ganttProject();

  // set the data
  chart.data(treeData);

  // configure the first data grid column
  var column_1 = chart.dataGrid().column(0);
  column_1.setColumnFormat("id", "text");
  column_1.title("text");
  column_1.title().fontSize(10);

  // configure the second data grid column
  var column_2 = chart.dataGrid().column(1);
  column_2.setColumnFormat("id", "short-text");
  column_2.title().useHtml(true);
  column_2.title("short-text");
  column_2.title().fontSize(10);
  column_2.depthPaddingMultiplier(0);
  column_2.collapseExpandButtons(false);

  // add and configure the third data grid column
  var column_3 = chart.dataGrid().column(2);
  column_3.setColumnFormat("id", "direct-numbering");
  column_3.title().useHtml(true);
  column_3.title("direct-numbering");
  column_3.title().fontSize(10);
  column_3.title().wordWrap("break-word");
  column_3.title().padding(7);

  // set the position of the splitter
  chart.splitterPosition("50%");

  // configure the scale
  chart.getTimeline().scale().maximum("2018-03-15");

  // set the container id
  chart.container("container");

  // initiate drawing the chart
  chart.draw();

  // fit elements to the width of the timeline
  chart.fitAll();
});
```

--------------------------------

### Initialize Resource Gantt Chart

Source: https://github.com/anychart/docs.anychart.com/blob/develop/samples/GANTT_Data_02.html

Sets up the data tree, maps intervals, and renders the Resource Gantt chart.

```javascript
anychart.onDocumentReady(function () { // create data var data = [ { id: "A", name: "Location A", child_items: [ { id: "1", name: "Server 1", intervals: [ {id: "1_1", start: "2018-01-05", end: "2018-01-25"}, {id: "1_2", start: "2018-01-28", end: "2018-02-22"}, {id: "1_3", start: "2018-03-03", end: "2018-03-25"} ]}, { id: "2", name: "Server 2", intervals: [ {id: "2_1", start: "2018-01-07", end: "2018-02-15"}, {id: "2_2", start: "2018-02-26", end: "2018-03-20"} ]} ]}, { id: "B", name: "Location B", child_items: [ { id: "3", name: "Server 3", intervals: [ {id: "3_1", start: "2018-01-04", end: "2018-03-25"} ]} ]} ]; // create a data tree var treeData = anychart.data.tree(data, "as-tree", null, {children: "child_items"}); // map the data var mapping = treeData.mapAs({periods: "intervals"}); // create a chart var chart = anychart.ganttResource(); // set the data chart.data(mapping); // set the container id chart.container("container"); // initiate drawing the chart chart.draw(); // fit elements to the width of the timeline chart.fitAll(); });
```

--------------------------------

### JSON Data Format Example

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Working_with_Data/Data_Adapter/Loading_JSON_File.md

Example of a JSON file structure containing array-based data for chart visualization.

```json
[
  ["Eyeshadows", 249980],
  ["Eyeliner", 213210],
  ["Eyebrow pencil", 170670],
  ["Nail polish", 143760],
  ["Lipstick", 128000],
  ["Lip gloss", 110430],
  ["Mascara", 102610],
  ["Foundation", 94190],
  ["Rouge", 80540],
  ["Powder", 53540]
]
```

--------------------------------

### Initialize Gantt Project Chart with Data

Source: https://github.com/anychart/docs.anychart.com/blob/develop/samples/GANTT_Date_and_Time_05.html

This snippet demonstrates the basic setup for a Gantt Project chart. It includes data definition, date format and locale configuration, data tree creation, chart initialization, data assignment, container setting, and drawing the chart. Ensure the container ID 'container' exists in your HTML.

```javascript
html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; }

anychart.onDocumentReady(function () {
  // create data
  var data = [
    { id: "1", name: "Development", actualStart: "2018-01-15", actualEnd: "2018-03-10", children: [
      { id: "1_1", name: "Analysis", actualStart: "2018-01-15", actualEnd: "2018-01-25" },
      { id: "1_2", name: "Design", actualStart: "2018-01-20", actualEnd: "2018-02-04" },
      { id: "1_3", name: "Meeting", actualStart: "2018-02-05", actualEnd: "2018-02-05" },
      { id: "1_4", name: "Implementation", actualStart: "2018-02-05", actualEnd: "2018-02-24" },
      { id: "1_5", name: "Testing", actualStart: "2018-02-25", actualEnd: "2018-03-10" }
    ]}
  ];

  // set the input date/time format
  anychart.format.inputDateTimeFormat("yyyy-MM-dd");

  // set the output locale
  anychart.format.outputLocale("fr-fr");

  // create a data tree
  var treeData = anychart.data.tree(data, "as-tree");

  // create a chart
  var chart = anychart.ganttProject();

  // set the data
  chart.data(treeData);

  // set the container id
  chart.container("container");

  // initiate drawing the chart
  chart.draw();

  // fit elements to the width of the timeline
  chart.fitAll();
});
```

--------------------------------

### Configuring Connector Start and End Sizes

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Maps/Connector_Maps.md

Adjusts the start and end sizes of the connectors to create tapering or arrow-like effects.

```javascript
// changing the startSize and endSize of the connectors
series.startSize(10);
series.endSize(0);
```

--------------------------------

### Start Annotation Drawing

Source: https://github.com/anychart/docs.anychart.com/blob/develop/samples/STOCK_Drawing_Drawing_05.html

Starts the drawing of an annotation on the plot based on the selected type from the dropdown. Ensure the 'plot' variable is accessible in this scope.

```javascript
function create() {
  var select = document.getElementById("typeSelect");
  plot.annotations().startDrawing(select.value);
}
```

--------------------------------

### Initializing Layers and Charts

Source: https://github.com/anychart/docs.anychart.com/blob/develop/samples/DB_Stage_04.html

Sets up the stage, creates multiple layers for different charts, and defines the data and rendering logic for each chart.

```javascript
anychart.onDocumentReady(function () { // set stage stage = anychart.graphics.create("container"); // set layers //for the Winter Sales chart layer_1 = stage.layer(); layer_1.zIndex(80); //for the Spring Sales chart layer_2 = stage.layer(); //for the Summer Sales chart layer_3 = stage.layer(); //for the Fall Sales chart layer_4 = stage.layer(); //for the buttons layer_5 = stage.layer(); layer_5.zIndex(100); // set data for the Winter Sales var data_1 = [ {x: "Ice-Cream", value: 5000, fill:"#00FFFF"}, {x: "Sweets", value: 10000, fill:"#0DD9E6"}, {x: "Chocolates", value: 19000, fill:"#1AB2CC"}, {x: "Hot chocolate", value: 16000, fill:"#268CB2"}, {x: "Cookies", value: 9000, fill:"#336699"} ]; // chart type var chart_1 = anychart.column(); chart_1.title("Winter Sales"); chart_1.padding(50, 0, 0, 0); var series_1 = chart_1.column(data_1); series_1.fill(data_1); series_1.stroke(null); // draw chart_1.container(layer_1).draw(); // set data for the Spring Sales var data_2 = [ {x: "Ice-Cream", value: 10000, fill:"#FFCC99"}, {x: "Sweets", value: 12000, fill:"#F2BFB2"}, {x: "Chocolates", value: 13000, fill:"#E6B2CC"}, {x: "Hot chocolate", value: 6000, fill:"#D9A6E6"}, {x: "Cookies", value: 3000, fill:"#CC99FF"} ]; // set series data var chart_2 = anychart.column(); chart_2.title("Spring Sales"); chart_2.padding(50, 0, 0, 0); var series_2 = chart_2.column(data_2); series_2.stroke(null); // draw chart_2.container(layer_2).draw(); //set data for the Summer Sales var data_3 = [ {x: "Ice-Cream", value: 16350, fill:"#CCFF33"}, {x: "Sweets", value: 8930, fill:"#99EF50"}, {x: "Chocolates", value: 3400, fill:"#66DF6C"}, {x: "Hot chocolate", value: 2780, fill:"#33CF88"}, {x: "Cookies", value: 2000, fill:"#00bfa5"} ]; // set series data var chart_3 = anychart.column(); chart_3.title("Summer Sales"); chart_3.padding(50, 0, 0, 0); var series_3 = chart_3.column(data_3); series_3.stroke(null); // draw chart_3.container(layer_3).draw(); var data_4 = [ {x: "Ice-Cream", value: 5000, fill:"#ffa000"}, {x: "Sweets", value: 7000, fill:"#DF7800"}, {x: "Chocolates", value: 8440, fill:"#C05000"}, {x: "Hot chocolate", value: 9800, fill:"#A02800"}, {x: "Cookies", value: 10250, fill:"#800000"} ]; // set series data var chart_4 = anychart.column(); chart_4.title("Fall Sales"); chart_4.padding(50, 0, 0, 0); var series_4 = chart_4.column(data_4); series_4.stroke(null); // draw chart_4.container(layer_4).draw(); layer_1.remove(); layer_2.remove(); layer_3.remove(); layer_4.remove(); layer_5.remove(); });
```

--------------------------------

### Set Polar Chart Start Angle

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Basic_Charts/Polar_Plot/Overview.md

Configure the starting angle for a polar chart using the `startAngle()` method. The default is 0 degrees.

```javascript
// set the start angle
polar2.startAngle(90);
```

--------------------------------

### Initialize and Configure Word Tree Chart

Source: https://github.com/anychart/docs.anychart.com/blob/develop/samples/BCT_Word_Tree_05.html

Sets up the AnyChart Word Tree with a dataset, root word, and basic styling.

```javascript
anychart.onDocumentReady(function () { // create data var data = [ ["oxygen is a chemical element"], ["in nature, oxygen is a gas with no color or smell"], ["oxygen is a very important element"], ["oxygen was initially discovered in 1772"], ["oxygen is what makes burning possible"], ["oxygen can be used in smelting metal from ore"], ["oxygen is used in hospitals for killing bacteria"], ["oxygen is used to purify the water"], ["in nature, oxygen is produced by plants"], ["pure oxygen helps people with certain illnesses"], ["pure oxygen can be breathed during decompression"], ["pure oxygen is toxic"], ["exposure to pure oxygen can cause lung collapse"], ["liquid oxygen is a pale blue cryogenic liquid"], ["liquid oxygen is used for industrial purposes"], ["liquid oxygen is a powerful oxidizing agent"], ["liquid oxygen is used in rocket fuel"], ["liquid oxygen is supplied to hospitals"] ]; // create a chart and set the data chart = anychart.wordtree(data); //set the root word chart.word("liquid") // configure the font chart.maxFontSize(18); // set the chart title chart.title("Word Tree: Root Word"); // set the container id chart.container("container"); // initiate drawing the chart chart.draw(); });
```

--------------------------------

### Set Radar Chart Start Angle

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Basic_Charts/Radar_Plot/Overview.md

Configure the starting angle for the radar chart axes using the startAngle() method. The default is 0 degrees.

```javascript
// set the start angle
radar2.startAngle(90);
```

--------------------------------

### Initialize Column Chart

Source: https://github.com/anychart/docs.anychart.com/blob/develop/samples/Credits_01.html

Creates a column chart with sample data and configures the credits section.

```javascript
anychart.onDocumentReady(function () { var chart = anychart.column([10, 1, 7, 10]); // put your license key here and uncomment the next line // anychart.licenseKey("COPY-PASTE-YOUR-LICENSE-KEY"); var credits = chart.credits(); // credits are enabled by default. The only exception is our playground site. You can remove next line in production. credits.enabled(true); // new text for credits credits.text("Company"); // draw chart.container("container"); chart.draw(); });
```

--------------------------------

### Initialize Stock Chart with Annotations

Source: https://github.com/anychart/docs.anychart.com/blob/develop/samples/STOCK_Drawing_Drawing_01.html

Sets up a stock chart with a data table and enables annotation drawing listeners.

```javascript
anychart.onDocumentReady(function () { // the data used in this sample can be obtained from the CDN // https://cdn.anychart.com/csv-data/csco-daily.js // create a data table using this data var dataTable = anychart.data.table(); dataTable.addData(get_csco_daily_short_data()); // map the data var mapping = dataTable.mapAs({"value": 4}); // create a stock chart var chart = anychart.stock(); // create a plot on the chart plot = chart.plot(0); // create a line series var lineSeries = plot.line(mapping); lineSeries.name("CSCO"); // set the chart title chart.title("Initiating Drawing"); // set the container id chart.container("container"); // initiate drawing the chart chart.draw(); // reset the select list to the first option chart.listen("annotationDrawingFinish", function(){ document.getElementById("typeSelect").value = "default"; }); });
```

--------------------------------

### CSS Table Structure Example

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Working_with_Data/Data_Adapter/Parsing_HTML_Table.md

This example shows a CSS-based table structure that can be parsed. It uses divs with specific classes to represent table elements.

```html
<div class="table">
  <div class="heading">
    <div class="cell">
      <p>Date</p>
    </div>
    <div class="cell">
      <p>ILS (₪)</p>
    </div>
    <div class="cell">
      <p>CNY (¥)</p>
    </div>
  </div>
  <div class="row">
    <div class="cell">
      <p>01/01</p>
    </div>
    <div class="cell">
      <p>2</p>
    </div>
    <div class="cell">
      <p>3</p>
    </div>
  </div>
</div>
```

--------------------------------

### Radar Chart Start Angle Implementation

Source: https://github.com/anychart/docs.anychart.com/blob/develop/samples/BCT_Radar_Chart_02.html

Initializes two radar charts on a single stage, demonstrating the default start angle versus a 90-degree rotation.

```javascript
anychart.onDocumentReady(function () { // create data var data = [ {x: "A", value: 1222}, {x: "B", value: 2431}, {x: "C", value: 3624}, {x: "D", value: 5243}, {x: "E", value: 6813}, {x: "F", value: 5321}, {x: "G", value: 1567}, {x: "H", value: 3876} ]; // create a stage var stage = anychart.graphics.create("container"); // set the position and data for the first chart var radar1 = anychart.radar(data); radar1.title("Start Angle: Default (0\xb0)"); radar1.bounds(0, 0, "50%", "100%"); // set the chart container radar1.container(stage); // initiate drawing the chart radar1.draw(); // set the position and data for the second chart var radar2 = anychart.radar(data); radar2.title("Start Angle: 90\xb0"); radar2.bounds("50%", 0, "50%", "100%"); // set the start angle radar2.startAngle(90); // set the chart container radar2.container(stage); // initiate drawing the chart radar2.draw(); });
```

--------------------------------

### Initialize AnyChart Line Chart

Source: https://github.com/anychart/docs.anychart.com/blob/develop/samples/BCT_Line_Chart_01.html

Creates a line chart with sample data and renders it into the specified container.

```javascript
anychart.onDocumentReady(function () { // create data var data = [ ["January", 10000], ["February", 12000], ["March", 18000], ["April", 11000], ["May", 9000] ]; // create a chart var chart = anychart.line(); // create a line series and set the data var series = chart.line(data); // set the chart title chart.title("Line Chart: Basic Sample"); // set the titles of the axes var xAxis = chart.xAxis(); xAxis.title("Month"); var yAxis = chart.yAxis(); yAxis.title("Sales, $"); // set the container id chart.container("container"); // initiate drawing the chart chart.draw(); });
```

--------------------------------

### Start Annotation Drawing

Source: https://github.com/anychart/docs.anychart.com/blob/develop/samples/STOCK_Drawing_Serializing_02.html

Starts the drawing of a new annotation on the first plot based on the selected type from the dropdown. This function is typically called by a user interface element.

```javascript
function create() {
    var select = document.getElementById("typeSelect");
    chart.plot(0).annotations().startDrawing(select.value);
}
```

--------------------------------

### Load AnyChart Modules via HTML

Source: https://context7.com/anychart/docs.anychart.com/llms.txt

Demonstrates how to include core, chart-specific, and feature modules to manage application bundle size.

```html
<head>
  <!-- Core module - always required -->
  <script src="https://cdn.anychart.com/releases/8.14.1/js/anychart-core.min.js"></script>

  <!-- Chart type modules - load as needed -->
  <script src="https://cdn.anychart.com/releases/8.14.1/js/anychart-cartesian.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.14.1/js/anychart-pie.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.14.1/js/anychart-map.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.14.1/js/anychart-stock.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.14.1/js/anychart-gantt.min.js"></script>

  <!-- Feature modules -->
  <script src="https://cdn.anychart.com/releases/8.14.1/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.14.1/js/anychart-data-adapter.min.js"></script>

  <!-- Or use base module for common chart types -->
  <script src="https://cdn.anychart.com/releases/8.14.1/js/anychart-base.min.js"></script>

  <!-- Or use bundle for all features -->
  <script src="https://cdn.anychart.com/releases/8.14.1/js/anychart-bundle.min.js"></script>
</head>
```

--------------------------------

### Configure Resource Gantt Data Grid Column

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Gantt_Chart/Data_Grid/Columns.md

Adds a custom column to a Resource Gantt chart with specific formatting for the start date using the {%start} token.

```javascript
// create and configure a custom data grid column
var newColumn = chart.dataGrid().column(2);
newColumn.width(90);
newColumn.title("Start");
newColumn.title().fontColor("#64b5f6");
newColumn.title().fontWeight(600);
newColumn.labels().fontColor("#64b5f6");
newColumn.labels().format("{%start}{dateTimeFormat:dd MMM}");
```

--------------------------------

### Initialize Bar Chart with Data

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Working_with_Data/Settings_from_Data.md

Basic setup for creating a bar chart using a standard data array.

```javascript
//create data set
var data = [
  {x: 'Department Stores', value: 737166},
  {x: 'Discount Stores', value: 537166},
  {x: 'Men\'s/Women\'s Specialty Stores', value: 188662},
  {x: 'Juvenile Specialty Stores', value: 178662},
  {x: 'All other outlets', value: 89000}
];

//create bar chart
var chart = anychart.barChart();
var series = chart.bar(data);
```

--------------------------------

### Initialize and Render Column Chart

Source: https://github.com/anychart/docs.anychart.com/blob/develop/samples/AS_Fonts_01.html

Sets up the data, configures chart labels and tooltips, and draws the column chart inside the container.

```javascript
anychart.onDocumentReady(function () { // data var data = [ {x: "English", value: 2022776}, {x: "Français", value: 561753}, {x: "Português", value: 287318}, {x: "Español", value: 281288}, {x: "Русский", value: 204379}, {x: "中文", value: 146215}, {x: "Norsk (bokmål)", value: 133410} ]; // create chart var chart = anychart.column(data); chart.title("International Symbols Support"); chart.tooltip().format("Language: {%x}\nArticles: {%value}"); chart.labels().enabled(true).format("{%x}"); // draw chart.container("container"); chart.draw(); });
```

--------------------------------

### Set Fiscal Year Start Month

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Gantt_Chart/Timeline/Scale.md

Specify the starting month of the fiscal year using an integer from 1 to 12. This affects calculations for quarters, semesters, and years.

```javascript
// set the starting month of the fiscal year
chart.getTimeline().scale().fiscalYearStartMonth(2);
```

--------------------------------

### Configure Timeline Chart Scale

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Basic_Charts/Timeline_Chart.md

Set the minimum and maximum values for the scale and configure the fiscal year start month. Labels are formatted to display the fiscal year start month.

```javascript
chart.scale().minimum(Date.UTC(2003,7,30));
chart.scale().maximum(Date.UTC(2007,5,30));

chart.scale().fiscalYearStartMonth(7);

chart.axis().labels().format(
  "{%tickValue}{dateTimeFormat: MMM y}"
);
```

--------------------------------

### Initialize Stock Chart with Annotations

Source: https://github.com/anychart/docs.anychart.com/blob/develop/samples/STOCK_Drawing_Drawing_07.html

Sets up a stock chart with data, a line series, and loads predefined annotations. It also configures event listeners for annotation drawing.

```javascript
var annotationsAtServer = {"annotationsList":[{"enabled":true,"type":"ellipse","xAnchor":"2007-04-01","valueAnchor":34.73,"secondXAnchor":"2008-03-02","secondValueAnchor":26.03}]} ;
anychart.onDocumentReady(function () {
  // the data used in this sample can be obtained from the CDN
  // https://cdn.anychart.com/csv-data/csco-daily.js
  // create a data table using this data
  var dataTable = anychart.data.table();
  dataTable.addData(get_csco_daily_short_data());
  // map the data
  var mapping = dataTable.mapAs({"value": 4});
  // create a stock chart
  var chart = anychart.stock());
  // create a plot on the chart
  plot = chart.plot(0);
  // create a line series
  plot.line(mapping);
  // load an annotation
  plot.annotations().fromJson(annotationsAtServer);
  // set the chart title
  chart.title("Serializing and Deserialising Annotations");
  // set the container id
  chart.container("container");
  // initiate drawing the chart
  chart.draw();
  // reset the select list to the first option
  chart.listen("annotationDrawingFinish", function(){
    document.getElementById("typeSelect").value = "default";
  });
});
```

--------------------------------

### Full GraphicsJS Web Page Example

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Graphics/Quick_Start.md

This is a complete HTML file demonstrating how to include GraphicsJS, set up a container, and draw shapes. It combines all the previous steps into a single, runnable example.

```html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8"/>
    <script src="https://cdn.anychart.com/releases/{{branch-name}}/js/graphics.min.js"></script>
</head>
<body>
    <div id="container" style="width: 100%; height: 100%"></div>
    <script>
        // create a stage for the Deathly Hallows symbol
        stage = acgraph.create('container');

        // draw the square
        stage.rect(25, 50, 350, 300);

        // draw the circle
        stage.circle(200, 250, 100);

        // draw the triangle
        stage.path()
            .moveTo(25, 350)
            .lineTo(200, 50)
            .lineTo(375, 350)
            .close();

        // draw the wand in the middle
        stage.path()
            .moveTo(200, 50)
            .lineTo(200, 350);
    </script>
</body>
</html>
```

--------------------------------

### Initialize and Switch AnyChart Themes

Source: https://github.com/anychart/docs.anychart.com/blob/develop/samples/AS_Themes_00.html

Handles chart creation, theme application, and disposal of existing instances when switching themes.

```javascript
var chart; // create a chart when document is ready anychart.onDocumentReady(function(){ // create chart when document is ready createChart("defaultTheme") }); // function to creat a chart function createChart(theme) { // dispose chart if there is one already if (chart != null) chart.dispose(); // set theme anychart.theme(theme); // create chart chart = anychart.column([["Earth", 1], ["Fire", 2], ["Wind", 3], ["Water", 1.5]]); chart.title("Theme: " + theme); // set container and draw chart chart.container("container").draw(); } function changeTheme(){ // recreate chart to reset theme var select = document.getElementById("themeSelect"); createChart(select.value); }
```

--------------------------------

### Create a Basic Pie Chart

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Basic_Charts/Pie_Chart.md

This snippet demonstrates how to create a basic Pie chart by initializing it with data using the anychart.pie() constructor.

```javascript
// create data
var data = [
  {x: "A", value: 637166},
  {x: "B", value: 721630},
  {x: "C", value: 148662},
  {x: "D", value: 78662},
  {x: "E", value: 90000}
];

// create a chart and set the data
chart = anychart.pie(data);

// set the container id
chart.container("container");

// initiate drawing the chart
chart.draw();
```

--------------------------------

### Get Series Average Y-Value Separately

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Common_Settings/Statistics.md

Retrieve the average Y-value for individual series using getStat() with 'seriesYAverage'. You can get a series object via constructor methods or chart.getSeries() / chart.getSeriesAt().

```javascript
maleAverage = maleMartians.getStat("seriesYAverage");
femaleAverage = chart.getSeriesAt(1).getStat("seriesYAverage");
```

--------------------------------

### Get Average Y-Value of All Points

Source: https://github.com/anychart/docs.anychart.com/blob/develop/Common_Settings/Statistics.md

Call getStat() on a chart object with 'dataPlotYAverage' to get the average Y-value across all points in all series. This is useful for multi-series charts or charts with a single series.

```javascript
totalAverage = chart.getStat("dataPlotYAverage");
```