Add Point Styling in Quadrant Chart

[omervk]

Proposal

Mermaid.js should add point styling to individual points to allow for more (color, radius, border color, etc.) dimensions of information.

For instance, each point may represent a task located on the Urgent/Important quadrant chart. Adding more styling could allow color to indicate whether something is already in progress, while radius could indicate the size of the task.

Example:

Example

Alternative 1

Borrowing from flowchart:

quadrantChart
    %% ...
    "Point A": [0.8, 0.45]
    style "Point A" fill: #f9f, stroke: #333, stroke-width: 4px

The only difficulty here would be that points do not have ids and therefore names would be used.

Alternative 2

quadrantChart
    %% ...
    "Point A": [0.8, 0.45, 12] color: #f9f, border-color: #333, border-width: 4px

The extra variable is size, as it describes a dimension in the building of the point, rather than a style. Does not have the issue of having to reference the point by id and is backwards compatible (size defaults to 5).

Screenshots

No response

[sidharthv96]

I'm not a fan of including the size within the [ ].
Keeping it as part of the style section seems to be a cleaner choice.

    "Point A": [0.8, 0.45] color: #f9f, border-color: #333, border-width: 4px, size: 12

But, now if someone wants to add the same styling to multiple points, there will be repetition.
I guess that's why classdefs were added in flowcharts.
So we should try to adopt stuff from https://mermaid.js.org/syntax/flowchart.html#styling-a-node to keep things consistent.

[JingyuMarcelLee]

Hi, I am new to Mermaid, and this seems like a good first issue to start. Can I work on this issue if no one is working on it? I will add the size as part of the style section see if it works with the classdef.

[JingyuMarcelLee]

I'm still struggling with the Jison parsing and refactoring. My first goal was to just include the direct definition next to the point statement just as shown in the comment earlier without thinking about the class def. One problem is that the author of QuadrantChart has defined the QuadrantPointType by implementing the Point interface defined in /packages/mermaid/src/types.ts.

export interface QuadrantPointType extends Point {
  fill: string;
  radius: number;
  text: QuadrantTextType;
}

For now, it shouldn't be a problem, but it could be an issue in the future if I want to include other style definitions like border-color. One solution could be using similar ways how flowchart adds styled vertices. Not sure if this would be an overkill for this issue though.