Chart Title

[ZephD]

On some Chart objects, there is a "title" prop, but this does not manifest into a displayed title (it is unused).

Any chance this can be implemented?

For now, help with placing a object would be appreciated... (no x and y location data available).

[xile611]

@ZephD Title of charts diff very much, so no plan to implement this feature now.

[austinpickett]

@xile611 how do title of charts differ very much? I'm expecting something as simple as:

<LineChart title="Chart of PU x UV">...</LineChart>

The at the top of the chart, it displays the title. This is pretty standard across all chart presentation (Bar, Circle, Pie, Graph, etc).

[douglasrcjames]

Bumping this... how is a simple title not standard?

[davidchooo]

Another bump; there should be some simple solution to this by now. I'm having trouble finding any workaround to create a properly centered title for non-static graphs.

[christiaanwesterbeek]

A workaround for a centered title

.container {
  display: flex;
  flex-direction: column;
}

.container > h3 {
  margin-left: auto;
  margin-right: auto;
}

<div className="container">
  <h3>Chart of PU x UV</h3>
  <LineChart>...</LineChart>
</div>

sandbox: https://codesandbox.io/s/centered-title-5uei9

[rschristian]

A workaround for a centered title

.container {
  display: flex;
  flex-direction: column;
}

.container > h3 {
  margin-left: auto;
  margin-right: auto;
}

<div className="container">
  <h3>Chart of PU x UV</h3>
  <LineChart>...</LineChart>
</div>

sandbox: https://codesandbox.io/s/centered-title-5uei9

This won't actually work as the width of the SVG and the width of the chart itself are two very different things. It's trivial to make the chart title centered over the SVG, but because the chart has its own margins inside the SVG, it's impossible currently to to center over the chart itself.

[arnelamo]

.chart-container {
  position: relative;
}
.chart-title {
  position: absolute;
  top: 50px;
  left: 50%;
  z-index: 10;
}

[paullam328]

Lame title doesn't exist but this is probably the most robust workaround:

    <AreaChart
        width={500}
        height={400}
        data={data}
        margin={{
            top: 50,
            right: 30,
            left: 0,
            bottom: 0,
        }}
    >
        <text x={500 / 2} y={20} fill="black" textAnchor="middle" dominantBaseline="central">
            <tspan fontSize="14">Title</tspan>
        </text>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Area type="monotone" dataKey="Chrome" stroke="#8884d8" fill="#8884d8" />
        <Area type="monotone" dataKey="Edge" stroke="#82ca9d" fill="#82ca9d" />
        <Area type="monotone" dataKey="Safari" stroke="#ffc658" fill="#ffc658" />
    </AreaChart>

[sankaSanjeeva]

How to add a title to a chart that is inside ResponsiveContainer?

[ckifer]

Going to open this back up, it seems it was closed without much consideration

[crowbait]

Lame title doesn't exist but this is probably the most robust workaround:

    <AreaChart
        width={500}
        height={400}
        data={data}
    >
        <text x={500 / 2} y={20} fill="black" textAnchor="middle" dominantBaseline="central">
            <tspan fontSize="14">Title</tspan>
        </text>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
    </AreaChart>

This works really well, just change the fill color on <text> and the font size on <tspan> (to 24 in my case) and you're absolutely good to go. Devs might just copy paste this to finally get this feature implemented.

[sam-hieken]

... well it's been 6 months since this was reopened, anyone gonna implement this?

[ckifer]

Yeah sorry - unfortunately re-opened doesn't necessarily mean assigned or prioritized. If anyone wants to implement I will happily guide/review and get it merged. I just don't have the time.

At the end of the day this is easily implementable outside of the library (even if it should be available in it which based on +1s it should) and bugs that can't be hacked around external to the lib have/will most likely take priority

[Were-Logan-0110]

Okay so this worked perfectly for me i used the Box MUI with some testing margins etc... i was left with this

<Box
  marginBottom={"40px"}
  display={"flex"}
  flexDirection={"column"}
  alignItems={"center"}
>
  <strong style={{ paddingLeft: "10%", fontSize: "20px" }}>Title Here</strong>
  <ResponsiveContainer id="recharts-container-popup" width={400} height={300}>
    <LineChart data={data}>
      <CartesianGrid stroke="#ccc" />
      <Line dataKey="value" fill="#8884d8" />
      <YAxis
        label={{
          fill: "black",
          fontWeight: "bolder",
          value: "Value",
          angle: -90,
          position: "insideLeft",
        }}
      />
      <XAxis
        fontSize={13}
        dataKey="name"
        label={{
          value: "Month",
          dy: 12,
          fill: "black",
          fontWeight: "bolder",
        }}
      />
    </LineChart>
  </ResponsiveContainer>
</Box>;

[fGiordi]

does anyone have a solution without mui? preferably react and taildwind?

[crowbait]

does anyone have a solution without mui? preferably react and taildwind?

This https://github.com/recharts/recharts/issues/478#issuecomment-1413710756

[iamsatriya]

Okay so this worked perfectly for me i used the Box MUI with some testing margins etc... i was left with this

<Box
  marginBottom={"40px"}
  display={"flex"}
  flexDirection={"column"}
  alignItems={"center"}
>
  <strong style={{ paddingLeft: "10%", fontSize: "20px" }}>Title Here</strong>
  <ResponsiveContainer id="recharts-container-popup" width={400} height={300}>
    <LineChart data={data}>
      <CartesianGrid stroke="#ccc" />
      <Line dataKey="value" fill="#8884d8" />
      <YAxis
        label={{
          fill: "black",
          fontWeight: "bolder",
          value: "Value",
          angle: -90,
          position: "insideLeft",
        }}
      />
      <XAxis
        fontSize={13}
        dataKey="name"
        label={{
          value: "Month",
          dy: 12,
          fill: "black",
          fontWeight: "bolder",
        }}
      />
    </LineChart>
  </ResponsiveContainer>
</Box>;

Thanks, does any one find any solution to keep responsiveness for this case?