Grouped bar chart with multi line.

[ctofficial08]

I want to implement Grouped bar chart with multi line in same graph plot with Y axis show in both sides. But when I am using fx for bar the bar is getting grouped but the line is also getting grouped. I want the bar in groups, but lines should be show without breaking.
I am using below code and getting the screenshot1.png but I want like screenshot2.png

Please help to implement screenshot2.png using observable plot.

const plot = Plot.plot({
x: { axis: null },
fx: { padding: 0 },
y: { tickFormat: "s", grid: true, padding: 0 },
color: { scheme: "puor" },
marks: [
Plot.lineY(linedata, { x: "Year", y: "hours", stroke: "purple", strokeWidth: 1 }),
Plot.lineY(session, { x: "Year", y: "hours", stroke: "lightgreen", strokeWidth: 1 }),
Plot.barY(data, { x: "key", y: "population", fill: "key", fx: "state" }),
Plot.ruleY([0])
]
});
This is what I am getting currently

This is the requirement

[Fil]

Can you share the data? I don't understand how "Year" and "key" can be on the same date axis.

[ctofficial08]

Below is my component code with data

import React, { useState, useEffect, useRef } from 'react';
import * as Plot from '@observablehq/plot';

interface LineData {
Year: string;
hours: number;
}

interface SessionData {
Year: string;
hours: number;
}

interface Data {
year: string;
key: string;
population: number;
}

function Groupedbar() {
const containerRef = useRef(null);

const linedata: LineData[] = [
    { Year: "21/05/2024", hours: 8 },
    { Year: "22/05/2024", hours: 6 },
    { Year: "23/05/2024", hours: 8 },
    { Year: "24/05/2024", hours: 7 },
    { Year: "25/05/2024", hours: 10 },
    { Year: "26/05/2024", hours: 7 },
    { Year: "27/05/2024", hours: 9 },
    { Year: "28/05/2024", hours: 7 },
];

const session: SessionData[] = [
    { Year: "21/05/2024", hours: 5 },
    { Year: "22/05/2024", hours: 4 },
    { Year: "23/05/2024", hours: 6 },
    { Year: "24/05/2024", hours: 5 },
    { Year: "25/05/2024", hours: 7 },
    { Year: "26/05/2024", hours: 5 },
    { Year: "27/05/2024", hours: 7 },
    { Year: "28/05/2024", hours: 6 },
];

const data: Data[] = [
    { year: "21/05/2024", key: "male", population: 2 },
    { year: "21/05/2024", key: "female", population: 3 },
    { year: "22/05/2024", key: "male", population: 1 },
    { year: "22/05/2024", key: "female", population: 2 },
    { year: "23/05/2024", key: "male", population: 1 },
    { year: "23/05/2024", key: "female", population: 2 },
    { year: "24/05/2024", key: "male", population: 2 },
    { year: "24/05/2024", key: "female", population: 3 },
    { year: "25/05/2024", key: "male", population: 1 },
    { year: "25/05/2024", key: "female", population: 2 },
    { year: "26/05/2024", key: "male", population: 1 },
    { year: "26/05/2024", key: "female", population: 2 },
    { year: "27/05/2024", key: "male", population: 1 },
    { year: "27/05/2024", key: "female", population: 1 }
];

useEffect(() => {
    if (data === undefined) return;

    const plot = Plot.plot({
        x: { axis: null },
        fx: { padding: 0 },
        y: { tickFormat: "s", grid: true, padding: 0 },
        color: { scheme: "puor" },
        marks: [
            Plot.lineY(linedata, { x: "Year", y: "hours", stroke: "purple", strokeWidth: 1 }),
            Plot.lineY(session, { x: "Year", y: "hours", stroke: "lightgreen", strokeWidth: 1 }),
            Plot.barY(data, { x: "key", y: "population", fill: "key", fx: "year" }),
            Plot.ruleY([0])
        ]
    });

    if (containerRef.current) {
        containerRef.current.append(plot);
    }
    return () => plot.remove();
}, [data]);

return (
    <div ref={containerRef} />
);

}

export default Groupedbar;

[ctofficial08]

This is not the real data. This is example data what we have used if you want to modify data you can. My requirement is that 2nd screenshot.

[Fil]

Thanks. I don't think there is an easy way to draw lines across facets, so using facets to make a grouped bar chart does not work in this case.

I'd recommend:

1. using "day" rather than "year" for the x scale.
2. using a continuous (temporal) scale for x, otherwise with an ordinal scale you'll be surprised when "day" goes from the "31/07/2024" to "01/08/2024".
3. plotting the bars as rects instead, with x1 being the "day at 06:00" for males, and "day at 12:30" for females, and similarly x2 being the "day at 11:30" for males, and "day at 18:00" for females. (Adjust to make the bars have the expect width.)

(Another possibility is to create two charts and lay them on top of one another. You can reuse the x scale from the line chart to use as the fx scale for the bar chart. But this won't solve the other problems.)