---
title: JsonChart
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/charts/JsonChart
---

Creates a json chart. Data can either be obtained by performing a NRQL query against a particular account, or it can be passed through the `data` prop.

The `data` format is a series of objects, each containing `metadata` and `data`. Each `data` contains both values from this point, and `x` and `y` keys used to plot the chart.

### Usage

```jsx
import { JsonChart } from 'nr1'
```

### Examples

#### Basic

```jsx
<JsonChart
  accountIds={[1]}
  query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType"
/>
```

#### With multiple accounts

```jsx
<JsonChart
  accountIds={[1, 1067061]}
  query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType"
/>
```

#### Fill container

```jsx
<JsonChart
  accountIds={[1]}
  query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType"
  fullWidth
  fullHeight
/>
```

#### With custom data

```jsx
function render() {
  const data = {
    id: 1,
    name: "Foo",
    price: 123,
    tags: ["Bar", "Eek"],
    stock: {
      warehouse: 300,
      retail: 20,
    },
  };

  return <JsonChart data={data} fullWidth />;
}
```

### Props

| `accountId` DEPRECATED number | > #### ⚠️ DUE NOVEMBER 1ST, 2022 > > The `accountId` is deprecated, use `accountIds` instead Sets the account ID to perform the query.                                                                                                                                                                        |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `accountIds` number\[]        | Sets the account IDs to perform the query.                                                                                                                                                                                                                                                                    |
| `className` string            | Appends class names to the component.                                                                                                                                                                                                                                                                         |
| `data` object\[]              | Data is an array of objects where each object represents a series to be drawn. Each series comprises visualization metadata and an array of data points. ````js const data = {   id: 1,   name: 'Foo',   price: 123,   tags: ['Bar', 'Eek'],   stock: {     warehouse: 300,     retail: 20,   }, }; ```  ```` |
| `fullHeight` boolean          | Expands the chart to occupy all available height.                                                                                                                                                                                                                                                             |
| `fullWidth` boolean           | Expands the chart to occupy all available width.                                                                                                                                                                                                                                                              |
| `query` string                | NRQL query used for fetching data. The query is performed against the provided `accountIds`.                                                                                                                                                                                                                  |
| `style` object                | Inline style for custom styling.                                                                                                                                                                                                                                                                              |