Ideas

Add Parameter to {[ chart ]} Shortcode to Show/Hide Y/X Axes

Add Parameter to {[ chart ]} Shortcode to Show/Hide Y/X Axes

Lava

We are using the chart shortcode to show the results of a custom discipleship assessment we're building. The chart that is displayed is a bar chart, and our Community Life team didn't want the y-axis values to be shown. They didn't want people getting tripped up by the numbers, but rather they just want people to see what area they are high / low in.

The core chart shortcode doesn't allow you to hide it, however Chart.js does (which is what the chart shortcode uses). I found this StackOverflow article that explains how to add an option to hide those axes.

In the short-term, I've essentially duplicated the entire "chart" shortcode into a "chartmodified" shortcode and added those parameters myself. Would love to see these get added to Core though. Here's the final chart look we were going for:

Screen_Shot_2022-09-20_at_4.58.01_PM.png

Here are the two new parameters I added:

Screen_Shot_2022-09-20_at_4.29.34_PM.png

Here are screenshots of the code snippets (left is original code, right is what I modified) if it's helpful. There may be other areas that need it, but this is what worked for our use case.

Screen_Shot_2022-09-20_at_4.44.47_PM.png

Screen_Shot_2022-09-20_at_4.47.26_PM.png

Screen_Shot_2022-09-20_at_4.48.36_PM.png


Also if needed, here's the code I'm using to generate the chart (it's a snippet of a larger code base):

{[ chartmodified type:'bar' yaxismin:'0' yaxisshow:'false' tooltipshow:'false' ]}
   {% for section in assessment.Result.Sections %}
      {% assign numOfColors = barColorArray | Size %}
      {% assign forloopMod = forloop.index0 | Modulo:numOfColors %}
      [[ dataitem label:'{{ section[0] }}' value:'{{ section[1] }}' fillcolor:'{{ barColorArray[forloopMod] }}' ]] [[ enddataitem ]]
   {% endfor %}
{[ endchartmodified ]}
Photo of Leah JenningsSubmitted by Leah Jennings, Northside Christian Church  ·   ·  Lava
Login to add a comment...