{"record":{"id":"65293f9a8b0f40bc","repo":"mermaid-js/mermaid","slug":"style-named-key-is-not-supported","errorCode":null,"errorMessage":"style named ${key} is not supported.","messagePattern":"style named (.+?) is not supported\\.","errorType":"validation","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts","lineNumber":89,"sourceCode":"      }\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,\n    },\n  ]);\n}\n","sourceCodeStart":71,"sourceCodeEnd":107,"githubUrl":"https://github.com/mermaid-js/mermaid/blob/d93e9c88c01a599c062ee6a3f1462e3558ac6b90/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts#L71-L107","documentation":"Thrown by parseStyles when a style line's key is not one of the four supported properties (radius, color, stroke-color, stroke-width). Any unrecognized key aborts style parsing. The error message echoes the offending key name so the author can spot the typo or unsupported property.","triggerScenarios":"Writing a style with an unsupported property like 'fill: #FFF', 'opacity: 0.5', 'width: 10', or a typo like 'colour: #FFF'; any key outside the fixed allow-list.","commonSituations":"Author assumes general CSS properties work; typo in a supported key; copy-pasting styles from other diagram types that accept different properties.","solutions":["Use only the supported keys: radius, color, stroke-color, stroke-width.","Check for typos (e.g. 'colour' vs 'color').","Remove unsupported properties — quadrant points don't support arbitrary CSS.","Consult the quadrant-chart style docs for the current property list."],"exampleFix":"// before\nquadrantChart\n  point [0.5, 0.5]: \"Label\" : {colour: #FFF}\n\n// after\nquadrantChart\n  point [0.5, 0.5]: \"Label\" : {color: #FFFFFF}","handlingStrategy":"validation","validationCode":"const SUPPORTED_QUADRANT_STYLES = new Set(['radius', 'color', 'stroke-color', 'stroke-width']);\n\nfunction validateStyleKeys(styles: string[]): string[] {\n  return styles\n    .map(s => s.trim().split(/\\s*:\\\\s*/)[0])\n    .filter(key => !SUPPORTED_QUADRANT_STYLES.has(key));\n}","typeGuard":"function isSupportedStyleKey(key: string): boolean {\n  return new Set(['radius', 'color', 'stroke-color', 'stroke-width']).has(key);\n}","tryCatchPattern":"try {\n  await mermaid.render('g', diagramText);\n} catch (e) {\n  if (e instanceof Error && /style named .* is not supported/.test(e.message)) {\n    showUserError('Only radius, color, stroke-color, and stroke-width are supported quadrant point styles.');\n  } else throw e;\n}","preventionTips":["Restrict quadrant point styles to radius, color, stroke-color, stroke-width.","Check for typos like 'colour' vs 'color'.","Do not assume arbitrary CSS properties are accepted."],"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"}