ARTICLE AD BOX
Use Case
My MUI-X Line Chart has a series array of both baseline and comparison values. There will be a comparison line for every baseline line (1 to 1). All baseline lines should be solid and all comparison lines should be dashed. So, for example, I will have 'PTV', 'GTV', 'CTV', 'body', 'heart' solid baseline lines and 'PTV', 'GTV', 'CTV', 'body', 'heart' dashed comparison lines. Note: Every plan will have a different labels. The solution to this issue cannot rely on hardcoded labels.
I know that each series has a label and a unique id. I am constructing a series as follows:
boost::json::object dvhObj; dvhObj.emplace("id", "b_" + s->label()); dvhObj.emplace("label", s->label()); dvhObj.emplace("color", s->color().toHexRgb()); dvhObj.emplace("showMark", false); dvhObj.emplace("data", getDVHPlotData(dvh)); seriesArray.emplace_back(dvhObj);Note: For the id I am simply adding "b_" for baseline in front of the label. The id would be "c_" + the label for comparison values just to keep them unique.
The Issue and Expected Behavior
I know that I can set ALL lines in the plot to dashed using:
<LineChart ... sx={{ [`.${lineElementClasses.root}`]: { strokeDasharray: "5 5", }, }} />And I know that I can set an individual line to dashed using its id:
<LineChart ... sx={{ [`.${lineElementClasses.root}[data-series="c_PTV"]`]: { strokeDasharray: "5 5", }, }} />But this methodology requires that I know the ids beforehand, which I do not. Therefore, using [data-series="c_PTV"] is completely impractical.
My expectation is that I am able to set the strokeDasharray of a group of series to be solid and to set the strokeDasharray of a group of series to be dashed.
The Question
The LineSeries API does not allow me to set a "lineStyle" like for a ChartsReferenceLine API and there is no generic flag that I can leverage in the LineSeries API to indicate that one series is for Baseline and one series is for Comparison and should be solid or dashed based on this flag. So, how do I accomplish this? It seems like it should be so simple, but I have not been able to come up with a solution.
To Reproduce (within a React application using MUI and MUI-X Charts)
import {LineChart} from "@mui/x-charts/LineChart"; import {lineElementClasses} from "@mui/x-charts"; const seriesData = [ [100, 38, 36, 30, 37, 43, 44], [100, 28, 27, 27, 33, 40, 35], [100, 32, 26, 10, 27, 33, 34], [100, 18, 17, 19, 20, 10, 25], [100, 12, 8, 16, 24, 10, 0], [100, 23, 17, 11, 8, 5, 2], ]; const syntheticData = [ {id: "b_CTV", label: "CTV", showMark: false, data: seriesData[0]}, // Should be solid {id: "c_CTV", label: "CTV", showMark: false, data: seriesData[1]}, // Should be dashed {id: "b_PTV", label: "PTV", showMark: false, data: seriesData[2]}, // Should be solid {id: "c_PTV", label: "PTV", showMark: false, data: seriesData[3]}, // Should be dashed {id: "b_GTV", label: "GTV", showMark: false, data: seriesData[4]}, // Should be solid {id: "c_GTV", label: "GTV", showMark: false, data: seriesData[5]}, // Should be dashed ]; const xLabels = [0, 1, 2, 3, 4, 5, 6]; const Plot: React.FC = () => { return ( <LineChart hideLegend xAxis={[{scaleType: "point", data: xLabels}]} series={syntheticData} margin={{left: 2, bottom: 2}} sx={{ // Unremark for All Lines dashed. // [`.${lineElementClasses.root}`]: { // strokeDasharray: "5 5", // }, // Unremark for a single series dashed // [`.${lineElementClasses.root}[data-series="c_PTV"]`]: { // strokeDasharray: "5 5", // }, "& .MuiLineElement-root": { strokeWidth: 2, }, }} /> ); }; export default Plot;