Cycle View help

[FlyFrosty]

Hello

I am trying to use the Cycle View for the first time and am trying to figure out how to replace the fixed information from the example with a label and the actual info.  I can get the actual information OR the first few letters of the label...but not both.

Thoughts?

From index.js:

     const mySteps = document.getElementById("mySteps");

     ...

     let stepCt = today.adjusted.steps;
     mySteps.text = `mySteps ${stepCt}`;

From index.view:

     <use href="#cycleview-item" class="cycle-item">
          <text id="mySteps" />
     </use>

From styles.css:

     #mySteps {fill: white;}

[Gondwana]

Might need text-length.

[FlyFrosty]

Thanks for the thought. I added text-length to my css and changed its value (between 30 and 5) and it had zero effect on the display.

If I change my index.view to:

<use href="#cycleview-item" class="cycle-item">
     <text>mySteps <text id="mySteps"/></text>
</use>

They display both, but overwrite each other.

[FlyFrosty]

Got it!

In my index.js:

     let mSNum = today.adjusted.steps;
     let mS = `MSTPS ${mSNum}`;
     mySteps.text = mS;

In my styles.css: (Thanks Gondwana!)

     #mySteps {text-length: 20;}

I don't know why it would't let me do the concat without the extra definition.