# Custom Charts Beta - Feedback Thread **URL:** \ **Category:** Ask the Community\ **Created:** [June 21, 2022, 11:08am UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004 "2022-06-21T11:08:41Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![david-ri](https://community.holistics.io/user_avatar/community.holistics.io/david-ri/32/543_2.png) [@david-ri](https://community.holistics.io/u/david-ri)\ **Post date:** [June 21, 2022, 11:08am UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/1 "2022-06-21T11:08:41Z")
With a few of us now beta testing [Custom Charts](https://community2.holistics.io/t/beta-tester-needed-custom-charts/910), I thought it might be useful to have a thread to share feedback & ask questions, as I’m sure many of us will have the come across similar problems. I need to spend a little more time with it, but some of my initial thoughts: - Will the ability to _create_ custom charts be extended beyond ‘Admin’ role? I would say that anyone with Analyst permission should be able to create them. (Ideally, it might be a separate permission we can grant, but certainly shouldn’t be an ‘admin’ role) - ~~A lot of the visualisations from Vega-Lite allow you to apply additional parameters (for example, for a histogram, setting the number of bins). rather than hard-coding these values, and for these custom charts to truely be re-usable, we need to be able to create a new user-input field for these parameters, and then pass that value through to the definition. (I can create a new input field, but this forces the user to select a field from the dataset which isn’t what we want here)~~ - Be good if we could apply our existing colour palette to the chart rather needing to hard-code this. - longer term, being able to store these definitions in our github repo alongside our AML models would be preferable ---
**Author:** ![Ian\_McLaren](https://community.holistics.io/user_avatar/community.holistics.io/ian_mclaren/32/647_2.png) [@Ian\_McLaren](https://community.holistics.io/u/Ian_McLaren)\ **Post date:** [June 22, 2022, 10:15am UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/2 "2022-06-22T10:15:50Z")
Hey David, Just on your second point (and maybe third) - have a look at the option definition properties (here: [Custom Chart properties | Holistics Docs](https://docs.holistics.io/docs/charts/custom-chart-properties)). I managed to set up 2 color pickers for a gradient area graph, it should be pretty simple to set up a number input to choose the number of bins. Then you would just reference the option value in the Vega Lite encoding. For reference, it looks like this in my code: The options block: ```auto options { option color1 { label: 'Color 1' type: 'color-picker' default_value: 'darkgreen' }} ``` Then to reference it in the Vega Lite JSON encoding: ```auto "mark": { "type": "area", "tooltip": true, "line": { "color": @{options.color1.value} }, ``` ---
**Author:** ![david-ri](https://community.holistics.io/user_avatar/community.holistics.io/david-ri/32/543_2.png) [@david-ri](https://community.holistics.io/u/david-ri)\ **Post date:** [June 23, 2022, 12:11am UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/3 "2022-06-23T00:11:51Z")
Thanks @Ian_McLaren , I’d completely missed that - yes this absolutely solves that problem! ---
**Author:** ![sm\_mk](https://community.holistics.io/letter_avatar_proxy/v4/letter/s/f6c823/32.png) [@sm\_mk](https://community.holistics.io/u/sm_mk)\ **Post date:** [July 13, 2022, 10:39pm UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/4 "2022-07-13T22:39:30Z")
I’ve finally got a chance to start tinkering with this but can’t seem to get past the demo instructions. This is following the doc but I can’t get any further. What am I missing? ![image](https://community.holistics.io/uploads/default/original/1X/975d59160678e73afa95a3022396db12d177ddbc.png) ---
**Author:** ![sm\_mk](https://community.holistics.io/letter_avatar_proxy/v4/letter/s/f6c823/32.png) [@sm\_mk](https://community.holistics.io/u/sm_mk)\ **Post date:** [July 13, 2022, 10:42pm UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/5 "2022-07-13T22:42:29Z")
OMG it’s the comments…ok disregard 🤦‍♂️ ---
**Author:** ![DataGeekDude](https://community.holistics.io/user_avatar/community.holistics.io/datageekdude/32/430_2.png) [@DataGeekDude](https://community.holistics.io/u/DataGeekDude)\ **Post date:** [July 19, 2022, 1:43pm UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/6 "2022-07-19T13:43:46Z")
> [@david-ri](#): > > Will the ability to _create_ custom charts be extended beyond ‘Admin’ role? I would say that anyone with Analyst permission should be able to create them. (Ideally, it might be a separate permission we can grant, but certainly shouldn’t be an ‘admin’ role) Absolutely agree with this! Only having admin’s creating charts is a bit of a pain. > [@david-ri](#): > > longer term, being able to store these definitions in our github repo alongside our AML models would be preferable +1 to that Overall my feedback is that once you get a hang of the code and plugging in custom variables it works really well. I have had issues with more complex charts (confidence intervals) but for the “simpler” charts overall it works really well. It would be great to have auto complete enabled for a lot of the definition, especially for the items in the curly brackets. ---
**Author:** ![sm\_mk](https://community.holistics.io/letter_avatar_proxy/v4/letter/s/f6c823/32.png) [@sm\_mk](https://community.holistics.io/u/sm_mk)\ **Post date:** [September 8, 2022, 1:01am UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/7 "2022-09-08T01:01:14Z")
With the options section of custom charts, I’m not clear on what options are available. The one doc page says you can define things like histogram buckets but on the other doc page doesn’t mention that (i’m assuming they’re not hardcoding buckets). For example right now my chart looks horrible and I’d like to enable user to define the upper/lower boundaries which I swear I’ve seen on a regular chart. Is there a way to enable that type of option for custom? ---
**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:** [September 9, 2022, 2:45am UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/8 "2022-09-09T02:45:23Z")
Hi @sm_mk, the options section of custom charts is where you define values to interpolate to the template. Our document for custom chart options is outdated, we are updating it. Meanwhile I will try to explain it here. * * * Currently custom charts option only support atomic values (string, boolean, number), and Holistics is supporting some pre-defined option type to render into the setting form. The definition of an option looks like this: ![image](https://community.holistics.io/uploads/default/original/1X/1eec902a3676b77dc9d5b7c9f5d1035f507a01d6.png) As you can see, there are currently 6 option types: `input`, `number-input`, `toggle`, `radio`, `select` and `color-picker`. I will go through each of them # input option This type of option renders a text input in the setting form, and will resolve whatever user put into that text input ![image](https://community.holistics.io/uploads/default/original/1X/5cf1878bd964ab0d42e7b73a2128d0720b8ab72e.png) It can be defined like this: ![image](https://community.holistics.io/uploads/default/original/1X/d46afc138c826a7c93d375a8432dc5e60d5ddf23.png) After defining this option, use can use `@{{ options.input_option.value }}` in your chart template to refer to the input value. Please note that `input_option` is just a sample name, you can define whatever name you want. # number-input option Similar to input option, but renders a number input and resolves a number value ![image](https://community.holistics.io/uploads/default/original/1X/5d7304f9e2170845dadfe507a253f99b6adefdb4.png) Definition: ![image](https://community.holistics.io/uploads/default/original/1X/7ae36a348d58aae5fa2c5b49058bff1909937c2a.png) Reference in chart template: `@{{ options.input_number_option.value }}` (option name can be changed) # toggle option This option type renders a toggle element, and resolves a boolean value (true/false) ![image](https://community.holistics.io/uploads/default/original/1X/9917e0ee1e8418d10cd5b8ec95d2bea486e63a9b.png) Definition: ![image](https://community.holistics.io/uploads/default/original/1X/d5f4aab3828377bdd4e1f1076790d893d6521a41.png) Reference: `@{{ options.toggle_option.value }}` (option name can be changed) # radio option This option type renders a radio list, and resolves the selected value ![image](https://community.holistics.io/uploads/default/original/1X/5c7c957e410fda5067917d133930683352adb208.png) Definition: ![image](https://community.holistics.io/uploads/default/original/1X/f1b481e174775179ce1cbfc5d18dc71860b31871.png) (the `options` property is needed to define the list of available options) Reference: `@{{ options.radio_option.value }}` (option name can be changed) # select option Similar to radio option, but renders a select box instead ![image](https://community.holistics.io/uploads/default/original/1X/2240f317ff157bb52f2e8c84997ad0199e453cc0.png) Definition: ![image](https://community.holistics.io/uploads/default/original/1X/dd96415e31709cf822196c64c41be01a77794d0f.png) Reference: `@{{ options.select_option.value }}` (option name can be changed) # color picker option This option type renders a color picker, and resolves the selected color hex code ![image](https://community.holistics.io/uploads/default/original/1X/b999ffff11e33bf347d9054bb42391a1cc4cbe29.png) Definition: ![image](https://community.holistics.io/uploads/default/original/1X/50b17f211df91b9afe4448bc327f0f2113162af1.png) Reference: `@{{ options.color.value }}` (option name can be changed) # Notices: - If you define many options, their name must be unique - You can define `label` for option to let setting form render the label, instead of the raw option name - Each option must have `default_value` defined. Currently you will have to take care of default value type for each option type. For example, `toggle` needs a boolean value, `number-input` needs a number value, etc,. In the future, we will improve the editor to add auto suggestion, better validation as @DataGeekDude suggested above. * * * Coming back to your case, if you want to define the upper/lower boundaries of your chart, I think you can create two `number-input` options, assuming that you name them `upper_bound` and `lower_bound`. Then, in your chart template, use `@{{ options.upper_bound.value }}` and `@{{ options.lower_bound.value }}` in proper places to set chart’s upper and lower boundaries. Hope this information helps! ---
**Author:** ![sm\_mk](https://community.holistics.io/letter_avatar_proxy/v4/letter/s/f6c823/32.png) [@sm\_mk](https://community.holistics.io/u/sm_mk)\ **Post date:** [September 22, 2022, 1:24pm UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/9 "2022-09-22T13:24:45Z")
Perfect! I appreciate you taking the time to post these details, can’t wait to try it out on what I was working on. ---
**Author:** ![dacou](https://community.holistics.io/user_avatar/community.holistics.io/dacou/32/467_2.png) [@dacou](https://community.holistics.io/u/dacou)\ **Post date:** [September 23, 2022, 3:56pm UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/10 "2022-09-23T15:56:38Z")
Hi, when I discovered vega lite, I thought it was a great grammar that could be used to design a tableau-like UI for designing charts for end users. Like a more user friendly version of this : [Pole✭](http://vega.github.io/polestar/) I understand that with the custom charts feature you took a different path but is it something that could come in the near future ? ---
**Author:** ![anthonytd](https://community.holistics.io/user_avatar/community.holistics.io/anthonytd/32/374_2.png) [@anthonytd](https://community.holistics.io/u/anthonytd)\ **Post date:** [September 26, 2022, 10:58am UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/11 "2022-09-26T10:58:30Z")
Thanks for the suggestion. Why would you prefer the tableau-like UI instead of the current visualization settings? ---
**Author:** ![dacou](https://community.holistics.io/user_avatar/community.holistics.io/dacou/32/467_2.png) [@dacou](https://community.holistics.io/u/dacou)\ **Post date:** [September 26, 2022, 9:52pm UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/12 "2022-09-26T21:52:30Z")
Hi @anthonytd, For me, this kind of UI is a bit like a “nocode” experience of building custom charts which enables end users to be more autonomous. The custom charts feature delivered today is more targeted to developers / data teams in my understanding. Best regards, Damien ---
**Author:** ![anthonytd](https://community.holistics.io/user_avatar/community.holistics.io/anthonytd/32/374_2.png) [@anthonytd](https://community.holistics.io/u/anthonytd)\ **Post date:** [September 27, 2022, 9:13am UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/13 "2022-09-27T09:13:15Z")
Thanks for the elaboration, @dacou. That makes sense now since it will open up more possibilities to end users rather than just data teams. Thanks for this great suggestion; we will keep it in mind for future custom chart developments. ---
**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:50am UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/15 "2022-10-21T03:50:10Z")
How can we add a custom name for the X-axis and the Y-axis of the chart? For example, instead of `Count of Records` or `x1, x2` as below image, I can change it to difference name: ![Screen Shot 2022-10-21 at 10.47.46](https://community.holistics.io/uploads/default/original/1X/8e790245a7974e83fccda30bc195c811578b8ca3.png) ---
**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:43am UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/16 "2022-10-21T04:43:34Z")
Hi Mike, we have released an update to our Custom chart parser. Now you can use comments inside the template 😁 ---
**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:47am UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/17 "2022-10-21T04:47:04Z")
Hi Quang, to update those names, you can use axis labels. Please refer to vega-lite document here: [Axis | Vega-Lite](https://vega.github.io/vega-lite/docs/axis.html#labels) ---
**Author:** ![tasha\_launchcode](https://community.holistics.io/letter_avatar_proxy/v4/letter/t/5e9695/32.png) [@tasha\_launchcode](https://community.holistics.io/u/tasha_launchcode)\ **Post date:** [February 13, 2023, 7:39pm UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/18 "2023-02-13T19:39:18Z")
Hello @kaid, I hope you’re having a good day so far! My organization has a use-case for the input forms that Vega-Lite generates instead of using Options, as the users of the inputs will be in the Viewer role rather than Analytics or Admin, and unable to access the options in the editor. In this use-case, we will be tracking progress on metrics that will be gathered from the data tables we import into Holistics. However, the goal numbers are not in the data tables, and we would prefer not to hard-code them into the models. I’ve tested the Vega-lite templates to use the generated inputs, and found that they are created just below the canvas of the visualization. However, this is hidden by the bottom panel that provides “Table Data, Chart Data, Executed Query” options. You can catch a glimpse of the generated input below the Custom Chart by selecting the maximize and minimize arrow on the right side of the panel, and flipping the bottom panel up and down. However, once the bottom panel moves, it resizes to it’s normal positioning below the Custom Chart canvas, and hides the generated input again. Would it be possible to adjust the bottom panel to show beneath the generated inputs, if there are any? Or might we be able to capture both the visual and the input in the canvas that is presented in both the editor and report widgets? Another Custom Chart issue I’ve encountered was with Geoshapes ([Geoshape | Vega-Lite](https://vega.github.io/vega-lite/docs/geoshape.html)), and where or how to best define the URL for the JSON in the Holistics template. I’ve looked through the developer options in Chrome to find any errors, and found that the widget was unable to reference the URL I’ve provided, showing it was blocked from connecting to the site of the URL. Would Geoshapes be a limitation for Holistics that is not yet supported, or would you happen to have any advice on how we could get this set up? I may be coding the template incorrectly, and welcome any suggestions on how to do so properly. If it is supported, I believe this would help our organization address a different request of displaying Map reports with multiple layers of text, to provide location names and data counts on a custom chart to TV Screens that wont be using a Mouse to get tool-tip displays of the data. Other than this, thank you very much for reading this through, and I hope you have a wonderful rest of your day! ---
**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:** [February 14, 2023, 8:52am UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/19 "2023-02-14T08:52:28Z")
Hi @tasha_launchcode, thanks so much for your feedback! Lets go through them one by one. Regarding your first one, are you using vega-lite’s input parameter ([Dynamic Behaviors with Parameters | Vega-Lite](https://vega.github.io/vega-lite/docs/parameter.html))? By default, custom chart will try to resize to fit to its container, which will make the inputs form hidden. You can consider this as our UI bug. I will work on a fix for this case, and will let you know once we release the fix. About loading geojson files for Geoshapes, Holistics has a Content Security Policy (CSP) rule that block loading external resources. This behavior is to prevent our users from potential XSS attacks. I will discuss again with our team to see if we can loosen this rule to allow loading geojson files. Meanwhile, there is a workaround. You can make use of our custom map feature ([How to create a Custom Map | Holistics Docs](https://docs.holistics.io/guides/map/create-custom-map)), which is actually uploading your geojson file to Holistics’s CDN, that is not blocked by the CSP rule above. After creating a new custom map, you can get the raw uploaded URL of your geojson file and use it in your custom chart. Hope these information help! ---
**Author:** ![tasha\_launchcode](https://community.holistics.io/letter_avatar_proxy/v4/letter/t/5e9695/32.png) [@tasha\_launchcode](https://community.holistics.io/u/tasha_launchcode)\ **Post date:** [February 14, 2023, 7:16pm UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/20 "2023-02-14T19:16:43Z")
Hi @kaid, thanks for addressing these issues for us, and providing the map details! You are correct, I did use Parameters with input binding to test the use of inputs with the custom charts. For the maps, where would I find the raw uploaded URL? I’ve checked the custom map settings and looked through the docs on creating a custom map, but I may be looking in the wrong areas. Other than this, thanks again for taking a look into these issues for us, and I hope you have a great rest of your day! ---
**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:** [February 15, 2023, 11:15am UTC](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004/21 "2023-02-15T11:15:08Z")
Hi @tasha_launchcode, since this workaround is very tricky and not recommended to use, I have PMed you and send the instruction there. You can use it until we have a proper solution for your case. [Next page](https://community.holistics.io/t/custom-charts-beta-feedback-thread/1004.md?page=2)