Why does my linear progress bar have an NaN error?

[paulbMakinApps (Paul Bauer)]

Hi, I am new to Monday apps and have been going through the components on https://style.monday.com/ and trying to familiarize myself with some of them.

I attempted to use the LinearProgressBar and had some difficulty getting it to work. I will add my code and what the output looks like below.

import logo from './logo.svg';
import './App.css';

//Import monday sdk and UI module
import mondaySdk from "monday-sdk-js";
import "monday-ui-react-core/dist/main.css"
import "monday-ui-react-core/dist/main.js"

//Import UI elements from monday
import LinearProgressBar from "monday-ui-react-core/dist/LinearProgressBar.js"
import Loader from "monday-ui-react-core/dist/Loader.js"

//Import Charts from vis
import '../node_modules/react-vis/dist/style.css';
import {XYPlot, LineSeries, VerticalGridLines, HorizontalGridLines, XAxis, YAxis} from 'react-vis';

//Create monday sdk instance
const monday = mondaySdk();

/* const color = monday.color;
const colors = monday.colors; */

function App() {
	
	const firstValue = Number("First value", 10);
	//const firstColor = color("First bar Color", "#597BFC");
	const secondValue = Number("Second value", 20);
	//const secondColor = color("Second bar Color", colors.blackish);
	const thirdValue = Number("Third value", 30);
	//const thirdColor = color("Third bar Color", colors.grass_green);
	const multiValues = [
	  { value: firstValue, color: "#597BFC" },
	  { value: secondValue, color: "#225091" },
	  { value: thirdValue, color: "#FF7575" }
	];
	
	const data = [
		  {x: 0, y: 8},
		  {x: 1, y: 5},
		  {x: 2, y: 4},
		  {x: 3, y: 9},
		  {x: 4, y: 1},
		  {x: 5, y: 7},
		  {x: 6, y: 6},
		  {x: 7, y: 3},
		  {x: 8, y: 2},
		  {x: 9, y: 0}
		];
	
  return (
    <div className="App">
      
	   <div style={{ width: "50%", margin: "40px" }}>
		<LinearProgressBar
		  animated
		  max={Number("Max value", 100)}
		  min={Number("Min value", 0)}
		  size={LinearProgressBar.sizes.LARGE}
		  indicateProgress
		  multi
		  multiValues={multiValues}
		  ariaLabel="A few colors"
		/>
		
		
		<div style={{ width: "50%", margin: "40px" }}>
		  <LinearProgressBar
			value={Number("Value", 50)}
			animated={Boolean("Is animated", true)}
			valueSecondary={Number("Secondary bar value", 60)}
			max={Number("Max value", 100)}
			min={Number("Min value", 0)}
			size={LinearProgressBar.sizes.LARGE}
			//barStyle={select("Style", Object.values(LinearProgressBar.styles), LinearProgressBar.styles.PRIMARY)}
			indicateProgress={Boolean("Indicate Progress", true)}
			//className={select("With custom class", ["linear-progress-bar--custom-class", ""], "")}
			ariaLabel="my awesome growth bar"
		  />
		</div>
		
		<div style={{ width: "20%", margin: "100px", display:"none" }}>
		<Loader svgClassName="loader-size-sm" />
		</div>
		
		
		<XYPlot height={300} width= {300}>
		  <VerticalGridLines />
		  <HorizontalGridLines />
		  <XAxis />
		  <YAxis />
		  <LineSeries data={data} />
		</XYPlot>
		
	  </div>
	  
    </div>
  );
}

export default App;

The graph is not relevant, it is just something else I was playing with. Does anyone know what I might be doing wrong? I am new to using React/node so I may be making a beginner mistake here but I couldn’t figure out what that might be.

[Helen]

Hi @paulbMakinApps, welcome to the community!

Hmm from what I can tell, your setup seems to be right. The only thought I had was, looking at the documentation it looks like for the boolean fields you didn’t specify, some of them default to “false:”

Could this be why the values aren’t showing up?

Feel free to DM me too, if you’d like to continue troubleshooting together! Happy to continue digging into this with you.

-Helen