what does anychart.bounds do and how does it configure the chart in a specific location

Question

I have to design two pie charts in a dashboard and first pie chart should be in upper half of page and 2nd chart in lower half page . I am using anychart for this but I am unable to understand how to use piechart.bounds(0,0,0,0) for this. What do the 4 parameters in anychart.bounds signify.

pieChart.bounds(0, 0, "50%", "100%");

I want my charts one below the other not side by side

score 0 · Answer 1 · answered Jun 24 '19 at 12:07

Try the following, bounds decides where your chart has to placed in the div:

anychart.onDocumentReady(function() {

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

  // 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 and configure the first pie chart
  var pie1 = anychart.pie(data);
  pie1.bounds(0, 0, "50%", "50%");
  // disable the legend
  pie1.legend(false);
  // set the chart container
  pie1.container(stage);
  // initiate drawing the chart
  pie1.draw();

  // create and configure the second pie chart
  var pie2 = anychart.pie(data);
  pie2.bounds("0", "50%", "50%", "50%");
  // set the radius
  pie2.radius("30%");
  // disable the legend
  pie2.legend(false);
  // set the chart container
  pie2.container(stage);
  // initiate drawing the chart
  pie2.draw();
});

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://cdn.anychart.com/releases/8.6.0/js/anychart-base.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.6.0/js/anychart-exports.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.6.0/js/anychart-ui.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<div id="container" style="height: 500px; width: 500px;"></div>

score 0 · Answer 2 · answered Jun 25 '19 at 02:40

The bounds() function places the chart in a specific location inside the stage (stage based layout). bounds() function gets 4 arguments: x, y, width, height. All for arguments can be a number of pixels or percents for relative positioning. @shrys provided a good sample of this. You can learn more about bounds() function in the API Reference. And about the stage-based layout in the Documentation. You will find there more samples of using this approach.

what does anychart.bounds do and how does it configure the chart in a specific location

2 Answers2