{"record":{"id":"70146d0f1969fd2e","repo":"mermaid-js/mermaid","slug":"value-for-style-value-is-invalid-please-use","errorCode":null,"errorMessage":"value for ${style} ${value} is invalid, please use a valid number","messagePattern":"value for (.+?) (.+?) is invalid, please use a valid number","errorType":"validation","errorClass":"InvalidStyleError","httpStatus":null,"severity":"error","filePath":"packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts","lineNumber":70,"sourceCode":"function setXAxisRightText(textObj: LexTextObj) {\n  quadrantBuilder.setData({ xAxisRightText: textSanitizer(textObj.text) });\n}\n\nfunction setYAxisTopText(textObj: LexTextObj) {\n  quadrantBuilder.setData({ yAxisTopText: textSanitizer(textObj.text) });\n}\n\nfunction setYAxisBottomText(textObj: LexTextObj) {\n  quadrantBuilder.setData({ yAxisBottomText: textSanitizer(textObj.text) });\n}\n\nfunction parseStyles(styles: string[]): StylesObject {\n  const stylesObject: StylesObject = {};\n  for (const style of styles) {\n    const [key, value] = style.trim().split(/\\s*:\\s*/);\n    if (key === 'radius') {\n      if (validateNumber(value)) {\n        throw new InvalidStyleError(key, value, 'number');\n      }\n      stylesObject.radius = parseInt(value);\n    } else if (key === 'color') {\n      if (validateHexCode(value)) {\n        throw new InvalidStyleError(key, value, 'hex code');\n      }\n      stylesObject.color = value;\n    } else if (key === 'stroke-color') {\n      if (validateHexCode(value)) {\n        throw new InvalidStyleError(key, value, 'hex code');\n      }\n      stylesObject.strokeColor = value;\n    } else if (key === 'stroke-width') {\n      if (validateSizeInPixels(value)) {\n        throw new InvalidStyleError(key, value, 'number of pixels (eg. 10px)');\n      }\n      stylesObject.strokeWidth = value;\n    } else {","sourceCodeStart":52,"sourceCodeEnd":88,"githubUrl":"https://github.com/mermaid-js/mermaid/blob/d93e9c88c01a599c062ee6a3f1462e3558ac6b90/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts#L52-L88","documentation":"Thrown by parseStyles in the quadrant-chart db when a style line has key 'radius' but its value fails validateNumber (the regex /^\\d+$/). The InvalidStyleError carries the offending value and tells the caller a valid number is expected. Radius must be a plain non-negative integer string like '5' — decimals, units, hex, or empty strings are rejected.","triggerScenarios":"Writing quadrant point styles like 'radius: 5.5' (decimal), 'radius: 5px' (unit), 'radius: five' (word), or 'radius:' (empty); any value not matching a pure digit string.","commonSituations":"Author assumes pixels/decimals are allowed because other style keys accept units; copy-pasting CSS-like values; trailing whitespace or units slipping in from a template.","solutions":["Use a plain integer for radius, e.g. 'radius: 5'.","Remove any unit suffix (px) or decimal point.","Check the style string for stray characters and trim whitespace.","Validate style values against /^\\d+$/ before passing them to mermaid."],"exampleFix":"// before\nquadrantChart\n  point [0.5, 0.5]: \"Label\" : {radius: 5.5px}\n\n// after\nquadrantChart\n  point [0.5, 0.5]: \"Label\" : {radius: 5}","handlingStrategy":"validation","validationCode":"function validateRadius(value: string): boolean {\n  return /^\\d+$/.test(value.trim());\n}","typeGuard":"function isValidRadiusString(value: string): boolean {\n  return /^\\d+$/.test(value.trim());\n}","tryCatchPattern":"try {\n  await mermaid.render('g', diagramText);\n} catch (e) {\n  if (e instanceof Error && /value for radius .* please use a valid number/.test(e.message)) {\n    showUserError('Quadrant point radius must be a plain integer (e.g. 5), no units or decimals.');\n  } else throw e;\n}","preventionTips":["Use a plain integer string for radius.","Avoid units (px) and decimals.","Validate style values with /^\\d+$/ before rendering."],"tags":["mermaid","quadrant-chart","parsing","validation"],"backgroundTag":null,"analyzedSha":"d93e9c88c01a599c062ee6a3f1462e3558ac6b90","analyzedAt":"2026-08-12T06:23:11.304Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}