{"record":{"id":"daea95f38bd05f19","repo":"mermaid-js/mermaid","slug":"value-for-style-value-is-invalid-please-use-daea95","errorCode":null,"errorMessage":"value for ${style} ${value} is invalid, please use a valid number of pixels (eg. 10px)","messagePattern":"value for (.+?) (.+?) is invalid, please use a valid number of pixels \\(eg\\. 10px\\)","errorType":"validation","errorClass":"InvalidStyleError","httpStatus":null,"severity":"error","filePath":"packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts","lineNumber":85,"sourceCode":"    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 {\n      throw new Error(`style named ${key} is not supported.`);\n    }\n  }\n  return stylesObject;\n}\n\nfunction addPoint(textObj: LexTextObj, className: string, x: number, y: number, styles: string[]) {\n  const stylesObject = parseStyles(styles);\n  quadrantBuilder.addPoints([\n    {\n      x,\n      y,\n      text: textSanitizer(textObj.text),\n      className,\n      ...stylesObject,","sourceCodeStart":67,"sourceCodeEnd":103,"githubUrl":"https://github.com/mermaid-js/mermaid/blob/d93e9c88c01a599c062ee6a3f1462e3558ac6b90/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts#L67-L103","documentation":"Thrown by parseStyles when a style line has key 'stroke-width' and its value fails validateSizeInPixels, which requires the exact pattern /^\\d+px$/ — one or more digits followed immediately by 'px'. Values like '2', '2.5px', '2 px' (space), '2em', or '2PX' (case) are all rejected. The InvalidStyleError message explicitly requests a pixel value like '10px'.","triggerScenarios":"Writing 'stroke-width: 2' (missing px), 'stroke-width: 2.5px' (decimal), 'stroke-width: 2 px' (space), 'stroke-width: 2em' (wrong unit), or 'stroke-width: 2PX' (uppercase).","commonSituations":"Author omits the 'px' unit assuming a bare number works (common since CSS sometimes allows unitless); using decimals for sub-pixel widths; copy-pasting CSS with different units or casing.","solutions":["Write the value as digits immediately followed by 'px', lowercase, e.g. 'stroke-width: 2px'.","Use an integer pixel value — decimals are rejected.","Remove any space between the number and 'px'.","Ensure lowercase 'px'; 'PX' fails the regex."],"exampleFix":"// before\nquadrantChart\n  point [0.5, 0.5]: \"Label\" : {stroke-width: 2}\n\n// after\nquadrantChart\n  point [0.5, 0.5]: \"Label\" : {stroke-width: 2px}","handlingStrategy":"validation","validationCode":"function validatePixels(value: string): boolean {\n  return /^\\d+px$/.test(value.trim());\n}","typeGuard":"function isValidPixelSize(value: string): boolean {\n  return /^\\d+px$/.test(value.trim());\n}","tryCatchPattern":"try {\n  await mermaid.render('g', diagramText);\n} catch (e) {\n  if (e instanceof Error && /value for stroke-width .* number of pixels/.test(e.message)) {\n    showUserError('Quadrant stroke-width must be an integer followed by px, e.g. 2px.');\n  } else throw e;\n}","preventionTips":["Always include the lowercase 'px' suffix with no space.","Use integer pixel values — decimals are rejected.","Validate with /^\\d+px$/ before rendering."],"tags":["mermaid","quadrant-chart","parsing","validation"],"backgroundTag":null,"analyzedSha":"d93e9c88c01a599c062ee6a3f1462e3558ac6b90","analyzedAt":"2026-08-12T06:23:11.304Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}