# Creating a new visualization in Kibana v8 using React

**URL:** <https://discuss.elastic.co/t/creating-a-new-visualization-in-kibana-v8-using-react/354447>\
**Category:** Kibana\
**Created:** [February 29, 2024, 12:49pm UTC](https://discuss.elastic.co/t/creating-a-new-visualization-in-kibana-v8-using-react/354447 "2024-02-29T12:49:49Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![rcw](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rcw/32/132214_2.png) [@rcw](https://discuss.elastic.co/u/rcw)\
**Post date:** [February 29, 2024, 12:49pm UTC](https://discuss.elastic.co/t/creating-a-new-visualization-in-kibana-v8-using-react/354447/1 "2024-02-29T12:49:49Z")

</div>

I am trying to create a custom visualization in Kibana v8.10.4 using React. I'll try to be brief, because there is already a lot of code required simply to register and display a basic visualization, but do let me know if you require more context.

I copied a lot of the code in [kibana/test/plugin\_functional/plugins/kbn\_tp\_custom\_visualizations at main · elastic/kibana · GitHub](https://github.com/elastic/kibana/tree/main/test/plugin_functional/plugins/kbn_tp_custom_visualizations) as a starting point.

I then added some schemas to my Definition:

```auto
...,
schemas: [
      {
        group: 'metrics',
        name: 'metric',
        title: 'Metric (Y Dimension)',
        min: 1,
        max: 1,
        aggFilter: ['count', 'sum', 'min', 'max', 'avg'],
        defaults: [{ type: 'count', schema: 'metric' }],
      },
      {
        group: 'buckets',
        name: 'bucket',
        title: 'X Axis',
        min: 1,
        max: 1,
        aggFilter: ['histogram'],
      },
      {
        group: 'buckets',
        name: 'split',
        title: 'Z Axis',
        min: 1,
        max: 1,
        aggFilter: ['histogram'],
      },
    ],
...,

```

When I configure the `Z Axis` bucket (using `histogram` aggregation and any `field`), I get the following message in Kibana:

```auto
 Unknown argument 'row' passed to function

```

I suspect I have not set up my render component parameters correctly, but I cannot work out how to do this just using the test plugin (or built-in plugins such as Gauge, Pie , etc) as a reference.

Ultimately, I want to create a custom visualization that can be configured using the above metrics & buckets. I think my problem is that I don't understand how to pass the metrics & buckets between the editor component and my main component, but I may be barking up the wrong tree entirely. Thanks in advance for any help!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [March 28, 2024, 12:50pm UTC](https://discuss.elastic.co/t/creating-a-new-visualization-in-kibana-v8-using-react/354447/2 "2024-03-28T12:50:38Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.