# Histogram in Kibana

**URL:** <https://discuss.elastic.co/t/histogram-in-kibana/213097>\
**Category:** Kibana\
**Created:** [December 26, 2019, 4:12pm UTC](https://discuss.elastic.co/t/histogram-in-kibana/213097 "2019-12-26T16:12:18Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aravinda\_Kolla](https://avatars.discourse-cdn.com/v4/letter/a/df788c/32.png) [@Aravinda\_Kolla](https://discuss.elastic.co/u/Aravinda_Kolla)\
**Post date:** [December 26, 2019, 4:12pm UTC](https://discuss.elastic.co/t/histogram-in-kibana/213097/1 "2019-12-26T16:12:18Z")

</div>

I am trying to replicate the histogram visualization type in kibana using the plugin new visualization type functionality. I used VisFactory's `createVislibVisualization`. The visualization is not rendered. I encounter the following problem  
`TypeError: Cannot read property 'splitColumn' of undefined`. How can I overcome this error?

---

<div class="post-metadata">

**Author:** ![bhavyarm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/bhavyarm/32/22392_2.png) [@bhavyarm](https://discuss.elastic.co/u/bhavyarm)\
**Post date:** [December 26, 2019, 4:59pm UTC](https://discuss.elastic.co/t/histogram-in-kibana/213097/2 "2019-12-26T16:59:10Z")

</div>

Can you please post your whole error log?

Thanks,  
Bhavya

---

<div class="post-metadata">

**Author:** ![Aravinda\_Kolla](https://avatars.discourse-cdn.com/v4/letter/a/df788c/32.png) [@Aravinda\_Kolla](https://discuss.elastic.co/u/Aravinda_Kolla)\
**Post date:** [December 27, 2019, 6:46am UTC](https://discuss.elastic.co/t/histogram-in-kibana/213097/3 "2019-12-27T06:46:11Z")

</div>

I am using Kibana version 7.1.1. The following is the browser console message.

```
Uncaught (in promise) TypeError: Cannot read property 'splitColumn' of undefined
at legacy.js:42
at new Promise (<anonymous>)
at handler (legacy.js:39)
at vislib.js:73
at new Promise (<anonymous>)
at VisualizeDataLoader.responseHandler (vislib.js:72)
at VisualizeDataLoader.<anonymous> (visualize_data_loader.ts:68)
at step (tslib.js:129)
at Object.eval [as next] (tslib.js:110)
at fulfilled (tslib.js:100)
```

---

<div class="post-metadata">

**Author:** ![nickofthyme](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nickofthyme/32/60032_2.png) [@nickofthyme](https://discuss.elastic.co/u/nickofthyme)\
**Post date:** [December 27, 2019, 3:24pm UTC](https://discuss.elastic.co/t/histogram-in-kibana/213097/4 "2019-12-27T15:24:46Z")

</div>

@Aravinda_Kolla I'm not too familiar with the legacy plugin but just looking at the error message, it seems that the `responseHandler` is expecting a `dimensions` object, here 👇 .

> <https://github.com/elastic/kibana/blob/master/src/legacy/ui/public/vis/response_handlers/legacy.js#L38>

The shape of the dimensions looks something like that of the `kibana_datatable` vis, for example...

```json
{
  "x": null,
  "y": [
    {
      "accessor": 0,
      "format": {
        "id": "number"
      },
      "params": {},
      "label": "Total Delays",
      "aggType": "count"
    }
  ]
}

```

You may just need to decorate the Vis object with dimensions using `getVisParams` helper method

> <https://github.com/elastic/kibana/blob/3ed5264cc307964ced5f90402264232724956602/src/legacy/core_plugins/visualizations/public/np_ready/public/legacy/build_pipeline.ts#L465-L482>

If you could post more source code it would be easier to assist you further.

---

<div class="post-metadata">

**Author:** ![Aravinda\_Kolla](https://avatars.discourse-cdn.com/v4/letter/a/df788c/32.png) [@Aravinda\_Kolla](https://discuss.elastic.co/u/Aravinda_Kolla)\
**Post date:** [December 30, 2019, 5:57am UTC](https://discuss.elastic.co/t/histogram-in-kibana/213097/5 "2019-12-30T05:57:44Z")

</div>

@nickofthyme I replicated the code on github kibana tagv7.1.1. The index.js looks as follows:

```auto
export default function (kibana) {

  return new kibana.Plugin({
    uiExports: {
      visTypes: [
        'plugins/hist_vis/hist_vis'
      ]
    }
  });
}

```

Copy pasted the code from the following link with no modifications in hist\_vis.js.

> [https://github.com/elastic/kibana/blob/v7.1.1/src/legacy/core\_plugins/kbn\_vislib\_vis\_types/public/histogram.js](https://github.com/elastic/kibana/blob/v7.1.1/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js)

---

<div class="post-metadata">

**Author:** ![Aravinda\_Kolla](https://avatars.discourse-cdn.com/v4/letter/a/df788c/32.png) [@Aravinda\_Kolla](https://discuss.elastic.co/u/Aravinda_Kolla)\
**Post date:** [December 30, 2019, 8:12am UTC](https://discuss.elastic.co/t/histogram-in-kibana/213097/6 "2019-12-30T08:12:02Z")

</div>

I tried to do the same for version 7.5.1.

I get the following javascript error:

```auto
Uncaught (in promise) TypeError: Cannot read property 'find' of undefined
    at point_series.js:133
    at Array.forEach (<anonymous>)
    at point_series.js:124
    at new VisConfig (vis_config.js:45)
    at Vis.initVisConfig (vis.js:88)
    at _callee$ (controller.js:109)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (controller.js:18)

```

The index.js is as follows:

```auto
export default function (kibana) {
  return new kibana.Plugin({
    require: ['elasticsearch'],
    name: 'hist_vis',
    uiExports: {
      visTypes: [
        'plugins/hist_vis/hist_vis'
      ],
      interpreter: [
        'plugins/hist_vis/pie_fn',
        'plugins/hist_vis/hist_vis_fn',
      ]
    },

    config(Joi) {
      return Joi.object({
        enabled: Joi.boolean().default(true),
      }).default();
    },
  });
}

```

The hist\_vis.js is same as:  
[https://github.com/elastic/kibana/blob/v7.5.1/src/legacy/core\_plugins/kbn\_vislib\_vis\_types/public/histogram.js](https://github.com/elastic/kibana/blob/v7.5.1/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js) .  
The hist\_fn.js is same as :  
[https://github.com/elastic/kibana/blob/v7.5.1/src/legacy/core\_plugins/kbn\_vislib\_vis\_types/public/vislib\_fn.js](https://github.com/elastic/kibana/blob/v7.5.1/src/legacy/core_plugins/kbn_vislib_vis_types/public/vislib_fn.js) .  
The pie\_fn.js is same as :  
[https://github.com/elastic/kibana/blob/v7.5.1/src/legacy/core\_plugins/kbn\_vislib\_vis\_types/public/pie\_fn.js](https://github.com/elastic/kibana/blob/v7.5.1/src/legacy/core_plugins/kbn_vislib_vis_types/public/pie_fn.js) .  
the controller is same as :  
[https://github.com/elastic/kibana/blob/v7.5.1/src/legacy/core\_plugins/kbn\_vislib\_vis\_types/public/controller.js](https://github.com/elastic/kibana/blob/v7.5.1/src/legacy/core_plugins/kbn_vislib_vis_types/public/controller.js)

---

<div class="post-metadata">

**Author:** ![nickofthyme](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nickofthyme/32/60032_2.png) [@nickofthyme](https://discuss.elastic.co/u/nickofthyme)\
**Post date:** [January 6, 2020, 3:19pm UTC](https://discuss.elastic.co/t/histogram-in-kibana/213097/7 "2020-01-06T15:19:59Z")

</div>

@Aravinda_Kolla sorry for the delay. It took me a bit to fully understand your question and figure out the code involved.

From what I understand, you just want to replicate the current histogram visualization. In coping all the files you mentioned below and attempting to create my own plugin/visualization under `legacy/core_plugins/hist_vis` I did encounter the same error as you with the `find` of undefined.

The problem is that it is never calling the `fn` method on the `hist_fn.js` which does the response handling, this guy 👇 .

> <https://github.com/elastic/kibana/blob/6d05841a418cfec4a88f0afbee172bccd9f0cded/src/legacy/core_plugins/kbn_vislib_vis_types/public/vislib_fn.js#L45-L64>

This is because `hist_vis` is not a `vislibCharts` type which are defined here 👇.

> <https://github.com/elastic/kibana/blob/6d05841a418cfec4a88f0afbee172bccd9f0cded/src/legacy/ui/public/visualize/loader/pipeline_helpers/build_pipeline.ts#L68-L76>

Adding `hist_vis` to this array renders the replicated visualization as expected. This is sort of complex because the `kbn_vislib_vis_types` plugin handles several visualizations that have shared logic.

> Note: This area of code is very volatile right now as we are internally migrating all our existing plugins, including visualizations, to a new platform. See [here](https://github.com/elastic/kibana/blob/master/src/core/MIGRATION.md#overview) if interested in more details.

Sorry, I can't give more context than this. I'm not too familiar with how this would work as a third-party plugin having replicated the `kbn_vislib_vis_types` logic. If that is your end intent, you might have more issues. Please let me know if you have any other questions.

---

<div class="post-metadata">

**Author:** ![Aravinda\_Kolla](https://avatars.discourse-cdn.com/v4/letter/a/df788c/32.png) [@Aravinda\_Kolla](https://discuss.elastic.co/u/Aravinda_Kolla)\
**Post date:** [January 7, 2020, 4:35am UTC](https://discuss.elastic.co/t/histogram-in-kibana/213097/8 "2020-01-07T04:35:28Z")

</div>

@nickofthyme Thank you for your elaborate reply. So if I want to replicate what the `kbn_vislib_vis_types` histogram does, as a third party plugin, do I have to write custom request and response handlers ?

---

<div class="post-metadata">

**Author:** ![nickofthyme](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nickofthyme/32/60032_2.png) [@nickofthyme](https://discuss.elastic.co/u/nickofthyme)\
**Post date:** [January 7, 2020, 3:04pm UTC](https://discuss.elastic.co/t/histogram-in-kibana/213097/9 "2020-01-07T15:04:57Z")

</div>

@Aravinda_Kolla yup, that's exactly right.

---

<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:** [February 4, 2020, 3:04pm UTC](https://discuss.elastic.co/t/histogram-in-kibana/213097/10 "2020-02-04T15:04:58Z")

</div>

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