Use Ternary Option with Chart.js and AngularJs

Question

Hello I am very new to front-end development and I am utilizing Chart.js and Angular-Charts. I currently have a problem in which the X-axis labels are too long however in the JSON object I am being returned I have a property for short or long names... What I am trying to figure out if there is a way to perform a ternary operation based upon the length of the string and make a decision on which property to use:

HTML:

<canvas canvas id="base" class="chart-horizontal-bar" height="400px"
                chart-labels="profile['detail']['freq-graph']['long-labels']"
                chart-data="[profile['detail']['freq-graph'].data]"
                chart-colours="['#008080']"
                chart-legend="false"/>

I figured I could do something like this:

 chart-labels="profile['detail']['freq-graph']['long-labels'].length<20 ?profile['detail']['freq-graph']['short-labels':profile['detail']['freq-graph']['long-labels']]"

Answer 1

You have a missing bracket.

chart-labels="profile['detail']['freq-graph']['long-labels'].length < 20 ? profile['detail']['freq-graph']['short-labels'] : profile['detail']['freq-graph']['long-labels']"
//                                                                                                                      ^^^