How to create multiple containers

jimmy-e commented 5 years ago

Reproduce:

Clone this repo / branch.
Run yarn
Run yarn build:dev
Run yarn start
Open your browser to http://localhost:8080/

Issue: I want to have two charts from anychart be rendered with a non-anychart element be rendered inbetween them. e.g.:

  <section>
    <Chart />
    <h1>I am a title between two charts!</h1>
    <Chart />
  </section>

However, the charts are getting placed in the same container and the header shows up after the two charts. How can I render multiple charts with anychart such that they are placed in their own, separate container? Thanks.

Shestac92 commented 5 years ago

@jimmy-e Yes, it's possible! You need to add id property for every chart to create individual divs for every chart. Below is the JS code:

import React from 'react'
import ReactDOM from 'react-dom'
import AnyChart from '../../dist/anychart-react.min.js'
import anychart from 'anychart'

let stage = anychart.graphics.create();
let chart1 = anychart.line([1, 2, 3]);
chart1.bounds(0, 0, '100%', '50%');
let chart2 = anychart.column();
chart2.column([3, 2, 1]);
chart2.line([3, 5, 6]);
chart2.bounds(0, '50%', '100%', '50%');

let stage2 = anychart.graphics.create();
let chart3 = anychart.line([1, 2, 3]);

ReactDOM.render(
  <section>
  <AnyChart
    instance={stage}
    id="firstChart"
    width={800}
    height={600}
    charts={[chart1, chart2]}
  />
    <h4>Header between charts</h4>
    <AnyChart
      instance={stage2}
      id="secondChart"
      width={800}
      height={600}
      charts={[chart3]}
    />
  </section>, document.getElementById('root'));

And HTML:

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="../../node_modules/anychart/dist/css/anychart-ui.min.css"/>
    <link rel="stylesheet" href="../../node_modules/anychart/dist/fonts/css/anychart.min.css"/>
</head>
<body>
<div id="root"></div>

<script src="simple_dashboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.3/iframeResizer.contentWindow.min.js"></script>
</body>
</html>

The result: Screenshot 2019-10-31 at 14 07 56

jimmy-e commented 5 years ago

Great thanks!

AnyChart / AnyChart-React

How to create multiple containers #13