I'm trying to align charts beside each other inside a table. I notice that there's a lot of extra styling the library associates with the tag that is preventing me from doing this. Any suggestions on how to get around this?

I'd like to be able to do something like this, with the two AnyChart's to be positioned beside each other:

                <table>
                    <tr>
                        <td>
                            <AnyChart  />
                        </td>
                        <td>
                            <AnyChart />
                        </td>
                    </tr>
                </table>

Thanks

Hi,

I tried to plot a simple Anychart with create-react-app project. But, it is giving me "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" error.

The code of my component is :

import React from "react";
import AnyChart from 'anychart-react'

class NewChart extends React.Component {

    render() {
        return (
            <div className="chart-component">
                <div className="chart-section">
                    <AnyChart
                        type="pie"
                        data={[1, 2, 3, 4]}
                        title="Simple pie chart"
                    />
                </div>
            </div>
        );
    }
}

export default NewChart;

Hi,

I'm trying to set to the minimum and maximum bounds for the yScale and am having trouble. Here's my component.

<AnyChart key={i} id={'anychart-bar-'+i} type='bar' height={300} data={data} yScale={{ minimum: -2, maximum: 2 }} yAxis={[0, { labels: { format: x => x.value + 1 } } ]} xAxis={[0, { orientation: 'right', overlapMode: 'allowOverlap' } ]} tooltip={{ format: x => x.value + 1 }} />

However, the value ranges on the y axis are still being set automatically by the data.

I'm using v8 Graph, and putting it into a container like so:

<div class="container-fluid">
    <div class="row">
        <div class="col">
            <h3>Graphs in Boxes!</h3>
        </div>
    </div>
    <div class="row">
        <div class="col mybox">
            <h4>box 1</h4>
        </div>
        <div class="col mybox">
            <div id="container"></div>
        </div>
    </div>
    <div class="row">
        <div class="col mybox">
            <h4>box 3</h4>
        </div>
        <div class="col mybox">
            <h4>box 4</h4>
        </div>
    </div>
</div>

Render is fine, drag/pan and click events fire correctly (even contextmenu), but zooming in and out zooms AND shifts, as if I'm at a mouse coordinate outside of the bounds of the given DIV. Occurs with or without an explicit Stage defined.

Additionally (and, it seems to explain this), mouse event report a (clientX,ClientY) that is relative to the (0,0) of the window, not the containing DIV.

Is this a bug, or is there some way to bind the scope of the graph's coordinate system to be relative to its container? If we zoom like moused over a node, we all expect to see that node stay under the mouse.

Reproduce:

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

Issue:
The multi-series chart does not show up. As mentioned here, the chart needs to be re-rendered to render the multi-column data. However, this does not seem feasible for the example repo, if the chart is part of a nested child component that cannot be directly re-rendered using the react-dom. (Using react-dom to render components more than once in the react spa is considered an anti-pattern).

Question:
How can we render a mutli-series chart when using a nested react component?

What's the proper way to set the name of a series with anychart-react?

how can i use anychart with react and typescript? i try to install types package but it dosent exist.

The charts don't resize when the browser window resizes. Would this be an AnyChart-React issue or an AnyChart issue?

Hello everyone, please help me get the coordinates of the drawn rectangle (I created it using plot.annotations (). StartDrawing ('rectangle')) on the trading chart

How do you change the color theme using this library? The suggested answer here doesn't seem to work

in this file you have code like this:

https://github.com/AnyChart/AnyChart-React/blob/master/examples/src/simple_dashboard.js#L5

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

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%');

ReactDOM.render(
  <AnyChart
    instance={stage}
    width={800}
    height={600}
    charts={[chart1, chart2]}
  />, document.getElementById('root'));

but anychart is not defined. when testing this with Jest, the runner will throw an error:
ReferenceError: anychart is not defined

how are you supposed to write tests for this?

Below code

`import React from 'react';
import AnyChart from 'anychart-react';
import anychart from 'anychart';

export default class Chart extends React.Component {

constructor() {
super();
this.state = { chart: 'stock' };
}

render() {
const dataTable = anychart.data.table();
dataTable.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],
]);
const mapping = dataTable.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');
const chart = anychart.stock();

chart.plot(0).ohlc(mapping).name('ACME Corp.');
const rangeSelector = anychart.ui.rangeSelector();
const rangePicker = anychart.ui.rangePicker();
chart.title('AnyStock Basic Sample');
chart.container('container');
chart.draw();
rangePicker.render(chart);
rangeSelector.render(chart);

const json = {
  type: 'stock',
  title: 'Stock Chart - simple',
  width: 800,
  height: 600,
  instance: chart,
};

return (
  <div className="App">
    <AnyChart {...json} />
  </div>
);

}
}
`

const lineData = [
{ name : "mon" , x:20, y:20},
{ name : "tue" , x:10, y:20},
{ name : "wed" , x:10, y:20},
{ name : "thu" , x:10, y:20},
{ name : "fri" , x:10, y:20},
{ name : "sat" , x:10, y:20},
{ name : "sun" , x:10, y:20},
]
<AnyChart height={400} id="pvtId" data={lineData} type="line" title="P v T" />

import React from 'react'
import ReactDOM from 'react-dom'
import anychart from 'anychart'
import AnyChart from 'anychart-react'

export default class SimpleChart extends React.Component {
	constructor(){
		super();
	}

	render() {
		const 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]	
		]);
		
		const 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');
   
		const chart = anychart.stock();
		chart.plot(0).ohlc(mapping).name('ACME Corp.');
		chart.title('AnyStock Basic Sample');
		chart.container('container');
		chart.draw();

    let json = {
        type: 'stock', // pie column bar
        title: 'Stock Chart',
        width: 800,
        height: 600,

        // PIE
        instance: chart,

        // fill: '#0066cc',
        // hoverFill: '#0066cc',
        // hatchFill: 'backwarddiagonal',
        // stroke: '#808080',
        // hoverStroke: '#0066cc',

        // COLUMN / BAR


    }

    return (
      <div className="App">
        <AnyChart
          {...json}
        />
      </div>
    );
  }
}

"anychart-react": "^1.4.1",
Error after npm start.
TypeError: Cannot read property 'table' of undefined
at new SimpleChart (/home/gtcoder/Sites/stock-predition/client/modules/Chart/pages/Simple/Simple.js:9:17)
at processChild (/home/gtcoder/Sites/stock-predition/node_modules/react-dom/cjs/react-dom-server.node.development.js:2095:14)
at resolve (/home/gtcoder/Sites/stock-predition/node_modules/react-dom/cjs/react-dom-server.node.development.js:2061:5)
at ReactDOMServerRenderer.render (/home/gtcoder/Sites/stock-predition/node_modules/react-dom/cjs/react-dom-server.node.development.js:2380:22)
at ReactDOMServerRenderer.read (/home/gtcoder/Sites/stock-predition/node_modules/react-dom/cjs/react-dom-server.node.development.js:2354:19)
at renderToString (/home/gtcoder/Sites/stock-predition/node_modules/react-dom/cjs/react-dom-server.node.development.js:2726:25)
at /home/gtcoder/Sites/stock-predition/server/server.js:140:29

Hi,

How do I create a tag cloud with this library? I've tried the following but get errors:

<AnyChart
      type="tag cloud"
      data={"this is a string string blah string"}
  />

The error:

Uncaught TypeError: anychart[e.type] is not a function

I've also tried several variations like tagCloud, etc with no luck. Other chart types work. Is a tag cloud like the following not supported? https://www.anychart.com/products/anychart/gallery/Tag_Cloud/The_Old_Man_and_the_Sea.php

Hi. I conduct a comparative analysis of visualization tools and one of the tools on my list is AnyChart. Since I use React adapters whenever possible, I also took your implementation. But I ran into one very strange problem. It consists in the fact that if it is necessary to draw a dataset from several series, I have to draw an adapter component with the initial settings without a dataset and when redrawing (re-rendering) already set it. For example:

interface Props {}
interface State {
  isMounted: boolean
}

const dataset = [
  ['2018', 1, 2, 3],
  ['2017', 10, 20, 30],
  ['2016', 100, 200, 300],
]

class LineChart extends PureComponent<Props, State> {
  public static displayName = 'LineChart'
  public state: State = {
    isMounted: false
  }

  componentDidMount() {
    this.setState({ isMounted: true })
  }

  public render() {
    const { width, height } = this.props

    if (this.state.isMounted) {
      const chartDataSet = anychart.data.set(dataset)

      return <AnyChart data={chartDataSet} />
    }

    return <AnyChart width={width} height={height} type="line" legend />
  }
}

I analyzed the adapter code a bit and paid attention to this part:

  // ...
  createInstance(props) {
    if (props.instance) {
      // ...
    } else if (props.type) {
      this.removeInstance();
      this.disposeInstance = true;
      this.instance = anychart[props.type](props.data);
      this.isStage = false;
      delete props.type;
      delete props.data;
    }
    // ...
  }
  // ...

I understand that, for example, the method anychart.line and the method chart.data take different input parameters. Does it make sense to separate these two properties and rename at least one of them at least in the adapter, so that there is no need to re-render the chart?

How do I prevent a scrolling when my data changes?

chart.data(treeData);

<AnyChart
   instance={stage}
  height={600}
  charts={[chart]} />

Hello,

We would really need to be able to use async rendering in our application: https://docs.anychart.com/Common_Settings/ASYNC_Rendering
It's just a boolean passed to the draw() function, which could be added in the props. Is it something that can be added?

Also is this repo still alive? I can see the Anychart version has been bumped to the latest one, but the React version used is ancient now. Are there any plans of upgrading it?

Thanks!

I'm currently working on a project and need a choropleth as a component for data visualization.

I'm new and a complete noob when it comes to configuring stuffs. Any suggestions and answers are appreciated.

Thank you

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.

I ran a yarn (package.json) update and anycharts is now producing an error:

Uncaught TypeError: __webpack_require__(...) is not a function

I believe the upgrade of the anycharts peer dependency to 7.14 today is what's causing it.

How to render multiple anychart in the same component