Value labels for line and area charts

[wylieconlon]

I couldn't figure out what value labels were supposed to look like for line and area charts, so I've pulled some examples from popular chart-building tools:

Line charts:

Area charts:

Stacked area charts:

[dej611]

Actually this label colored per category trick may be good also for bar charts

[qbob1]

To anyone looking for a workaround on this issue: You can layer a line chart on top of some transparent bar charts with a small padding value:

theme: { ...defaultChartTheme, scales: { barsPadding: 1 } },

{yAccessors?.map((yAccessor, index) => (
            <LineSeries
              id={toTitleCase(yAccessor)}
              key={yAccessor}
              name={yLegendOverrides?.[index] ?? toTitleCase(yAccessor)}
              xScaleType={xAxisProps?.scaleType}
              yScaleType={yAxisProps?.scaleType}
              xAccessor={xAccessor}
              yAccessors={[yAccessor]}
              data={baseData ?? []}
            />
          ))}
          {yAccessors?.map((yAcc, i) => (
            <BarSeries
              id={yAcc}
              xScaleType={xAxisProps?.scaleType}
              yScaleType={yAxisProps?.scaleType}
              xAccessor={xAccessor}
              yAccessors={[yAcc]}
              filterSeriesInTooltip={() => false}
              data={baseData ?? []}
                showValueLabel: true,
                overflowConstraints: [],
              }}
              hideInLegend={true}
              styleAccessor={(datum, b) => {
                return {
                  rect: {
                    opacity: 0,
                  },
                };
              }}
            />
          ))}

• the image above is using a custom value formatter to avoid rendering too many values