Why does my linear progress bar have an NaN error?

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" }}>
		  max={Number("Max value", 100)}
		  min={Number("Min value", 0)}
		  ariaLabel="A few colors"
		<div style={{ width: "50%", margin: "40px" }}>
			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)}
			//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 style={{ width: "20%", margin: "100px", display:"none" }}>
		<Loader svgClassName="loader-size-sm" />
		<XYPlot height={300} width= {300}>
		  <VerticalGridLines />
		  <HorizontalGridLines />
		  <XAxis />
		  <YAxis />
		  <LineSeries data={data} />

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.

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.


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.