ChartGroup

Groups different types of charts so that they can perform actions all together, like moving the needle according to their x-axes, showing the tooltip for the corresponding series, or graying out the area being selected in all charts at the same time.

The component acts like a React fragment; it will not render an additional tag in the DOM (it only enables grouping for all charts inside it). This means that this component, unlike others, does not accept className or style tags.

Usage

import { ChartGroup } from 'nr1'

Examples

Basic

function render() {
  const query =
    'SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType';
  const chartStyle = { height: 200 };

  return (
    <ChartGroup>
      <AreaChart style={chartStyle} accountId={1} query={query} />
      <LineChart style={chartStyle} accountId={1} query={query} />
      <ScatterChart style={chartStyle} accountId={1} query={query} />
    </ChartGroup>
  );
}

1
function render() {
2
  const query =
3
    'SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType';
4
  const chartStyle = { height: 200 };
5
6
  return (
7
    <ChartGroup>
8
      <AreaChart style={chartStyle} accountId={1} query={query} />
9
      <LineChart style={chartStyle} accountId={1} query={query} />
10
      <ScatterChart style={chartStyle} accountId={1} query={query} />
11
    </ChartGroup>
12
  );
13
}

Fill container

function render() {
  const query =
    'SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType';
  const chartStyle = { height: 200 };

  return (
    <ChartGroup>
      <AreaChart
        style={chartStyle}
        accountId={1}
        query={query}
        fullWidth
        fullHeight
      />
      <LineChart
        style={chartStyle}
        accountId={1}
        query={query}
        fullWidth
        fullHeight
      />
      <ScatterChart
        style={chartStyle}
        accountId={1}
        query={query}
        fullWidth
        fullHeight
      />
    </ChartGroup>
  );
}

1
function render() {
2
  const query =
3
    'SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType';
4
  const chartStyle = { height: 200 };
5
6
  return (
7
    <ChartGroup>
8
      <AreaChart
9
        style={chartStyle}
10
        accountId={1}
11
        query={query}
12
        fullWidth
13
        fullHeight
14
      />
15
      <LineChart
16
        style={chartStyle}
17
        accountId={1}
18
        query={query}
19
        fullWidth
20
        fullHeight
21
      />
22
      <ScatterChart
23
        style={chartStyle}
24
        accountId={1}
25
        query={query}
26
        fullWidth
27
        fullHeight
28
      />
29
    </ChartGroup>
30
  );
31
}

Props

childrenrequirednode

Arbitrary content. All charts inside ChartGroup communicate between each other.

Methods

`ChartGroup.render`

function () => undefined