# Custom chart/ Histogram chart cannot not render

**URL:** <https://community.holistics.io/t/custom-chart-histogram-chart-cannot-not-render/1256>\
**Category:** Report Bugs\
**Created:** [October 21, 2022, 3:16am UTC](https://community.holistics.io/t/custom-chart-histogram-chart-cannot-not-render/1256 "2022-10-21T03:16:46Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Quang\_Ng](https://community.holistics.io/user_avatar/community.holistics.io/quang_ng/32/793_2.png) [@Quang\_Ng](https://community.holistics.io/u/Quang_Ng)\
**Post date:** [October 21, 2022, 3:16am UTC](https://community.holistics.io/t/custom-chart-histogram-chart-cannot-not-render/1256/1 "2022-10-21T03:16:46Z")

</div>

Hello, I created a custom histogram chart:

```auto
CustomChart {
  fields {
    field data {
      type: 'dimension'
    }
  }

  options {
    option max_bins {
      label: "maximum number of bins"
      type: 'number-input'
      default_value: 50
    }
    option tick_count {
      label: "tick count"
      type: 'number-input'
      default_value: 5
    }
    option log_base {
      label: "log base"
      type: 'number-input'
      default_value: 2
    }
  }

  template: @vgl
  {
    "data": {"values": @{values}},
    "transform": [
      {"calculate": "log(datum.@{fields.data.name})/log(@{options.log_base.value})", "as": "log_x"}, 
      {"bin": {"maxbins": @{options.max_bins.value}}, "field": "log_x", "as": "bin_log_x"}, 
      {"calculate": "pow(@{options.log_base.value}, datum.bin_log_x)", "as": "x1"}, 
      {"calculate": "pow(@{options.log_base.value}, datum.bin_log_x_end)", "as": "x2"}
    ],
    "mark": {
      "type": "bar",
      "tooltip": true
    },
    "encoding": {
      "x": {
        "field": "x1",
        "scale": {"type": "log", "base": @{options.log_base.value}},
        "axis": {"tickCount": @{options.tick_count.value}}
      },
      "x2": {"field": "x2"},
      "y": {"aggregate": "count"}
    }
  }
  ;;
}

```

At first, it work well, but the next day, when I used it again, it did not render anything. I do not know what happened.  
When it worked:

 ![image](https://community.holistics.io/uploads/default/original/1X/0ee646f75b7cee3728f9ec48f91e44da9b7be3e9.png)

Now:

 ![Screen Shot 2022-10-21 at 10.16.12](https://community.holistics.io/uploads/default/original/1X/d71025ffe8f5f371b4b0493355a3bf1c6b9de15b.png)

---

<div class="post-metadata">

**Author:** ![kaid](https://community.holistics.io/user_avatar/community.holistics.io/kaid/32/12_2.png) [@kaid](https://community.holistics.io/u/kaid)\
**Post date:** [October 21, 2022, 4:21am UTC](https://community.holistics.io/t/custom-chart-histogram-chart-cannot-not-render/1256/2 "2022-10-21T04:21:13Z")

</div>

Hi Quang, please double check the data type of your `Amount Out Usd` field

Looking into your custom chart definition, the field `data` should be a number field.  
To ensure it, there are 2 options:

1. add `data_type: 'number'` to your field definition  
 ![image](https://community.holistics.io/uploads/default/original/1X/3d2dcdc56d03d19436cb2e8f445b41ad0088776f.png)  
Or
2. use `measure` as field type  
 ![image](https://community.holistics.io/uploads/default/original/1X/d15b13478e3afaf0dd36a3a0d82a0de63038aab0.png)

---

<div class="post-metadata">

**Author:** ![Quang\_Ng](https://community.holistics.io/user_avatar/community.holistics.io/quang_ng/32/793_2.png) [@Quang\_Ng](https://community.holistics.io/u/Quang_Ng)\
**Post date:** [October 21, 2022, 5:16am UTC](https://community.holistics.io/t/custom-chart-histogram-chart-cannot-not-render/1256/3 "2022-10-21T05:16:01Z")

</div>

Hello @kaid , the problem is solved by change `datum.@{fields.data.name}` to `datum['@{fields.data.name}']`, the same for `datum.bin_log_x` to `datum['bin_log_x']` …  
But now, I have a new issue.  
In editor mode, the chart renders fine:

 ![Screen Shot 2022-10-21 at 12.10.18](https://community.holistics.io/uploads/default/original/1X/e6d19683f4280e180dec6dca9212de91d7e1c1ae.png)  
But when in the dashboard. It not show anything:  
 ![Screen Shot 2022-10-21 at 12.10.34](https://community.holistics.io/uploads/default/original/1X/a32307a47a8b7d06f21a58760acce3235c97c338.png)

Note:

- `rounded volume` is the `amount out usd` but rounded into format “.2f”. It is a custom dimension that I added into the model (e.g bigquery: @sql{ROUND(amount\_out\_usd, 2)} )
- If I use the ordinary `amount out usd`, the chart renders okay in both editor mode and dashboard. I think maybe it’s the custom dimension problem

---

<div class="post-metadata">

**Author:** ![Quang\_Ng](https://community.holistics.io/user_avatar/community.holistics.io/quang_ng/32/793_2.png) [@Quang\_Ng](https://community.holistics.io/u/Quang_Ng)\
**Post date:** [October 21, 2022, 6:54am UTC](https://community.holistics.io/t/custom-chart-histogram-chart-cannot-not-render/1256/4 "2022-10-21T06:54:06Z")

</div>

@kaid I found more information, it looks like the chart will only render if I limit the size.  
The reason that my chart only renders in editor mode is that in that mode, the `executed query` is the automatic limit of `100000`  
Is there any way that I can build a histogram of full data size?

---

<div class="post-metadata">

**Author:** ![kaid](https://community.holistics.io/user_avatar/community.holistics.io/kaid/32/12_2.png) [@kaid](https://community.holistics.io/u/kaid)\
**Post date:** [October 21, 2022, 7:16am UTC](https://community.holistics.io/t/custom-chart-histogram-chart-cannot-not-render/1256/5 "2022-10-21T07:16:08Z")

</div>

@Quang_Ng let me check again. I’m trying to reproduce the issue on my side first.  
I will inform you for any updates

---

<div class="post-metadata">

**Author:** ![kaid](https://community.holistics.io/user_avatar/community.holistics.io/kaid/32/12_2.png) [@kaid](https://community.holistics.io/u/kaid)\
**Post date:** [October 24, 2022, 2:37am UTC](https://community.holistics.io/t/custom-chart-histogram-chart-cannot-not-render/1256/6 "2022-10-24T02:37:43Z")

</div>

Hi @Quang_Ng, could you double check if your data contains values 0 or NULL?  
The browser console should show something like below in this case

 ![image](https://community.holistics.io/uploads/default/original/1X/9b3180456263d26925b2398aba26e163ec777beb.png)

If this is the cause, you can either update your custom chart definition to properly handle 0 and null values, or add viz conditions to filter those values out

---

<div class="post-metadata">

**Author:** ![Quang\_Ng](https://community.holistics.io/user_avatar/community.holistics.io/quang_ng/32/793_2.png) [@Quang\_Ng](https://community.holistics.io/u/Quang_Ng)\
**Post date:** [October 24, 2022, 4:21am UTC](https://community.holistics.io/t/custom-chart-histogram-chart-cannot-not-render/1256/7 "2022-10-24T04:21:44Z")

</div>

Thank you very much, It worked now.

---

<div class="post-metadata">

**Author:** ![datbth](https://community.holistics.io/user_avatar/community.holistics.io/datbth/32/1414_2.png) [@datbth](https://community.holistics.io/u/datbth)\
**Post date:** [January 2, 2023, 4:29am UTC](https://community.holistics.io/t/custom-chart-histogram-chart-cannot-not-render/1256/8 "2023-01-02T04:29:26Z")

</div>

A post was split to a new topic: [Custom Chart - Waterfall not working](https://community.holistics.io/t/custom-chart-waterfall-not-working/1361)