Composed charts

[dortamiguel]

Can I compose two different charts into one?

Like for example drawing a line in a bar chart.

[stahlmanDesign]

I recently asked the same thing and then answer is 'not right now' https://twitter.com/jstahlman/status/939260265618706435

[plouc]

I've started something on #116, but it involves far more work than I expected :/, I'm planning to re-introduce this in a more progressive way.

[wulucxy]

@plouc what is the progress now?

[wulucxy]

@stahlmanDesign @ellipticaldoor do you guys solve this problem？

[plouc]

Unfortunately, there is no proper guides on how to do it, but if you have a look at the code for each component, you could be able to build composed charts.
Main chart components are build on smaller components, axes, containers, nodes…
I'm also adding layout components, which will also help.

[wulucxy]

@plouc so where I can find the layout Component?

[plouc]

I'm adding some, for example https://github.com/plouc/nivo/blob/master/packages/parallel-coordinates/src/ParallelCoordinatesLayout.js.

[plouc]

For now, the best you can do is having a look at the components and extract the relevant pieces, not really handy I admit :/

[plouc]

I've started to introduce a layers property which allows to pass extra layers and also to change the order of elements.

For now, it's supported on Bar and ScatterPlot components. You can find a working example of it here using the ScatterPlot component.

If you're willing to contribute on other components, please do not hesitate :)

[ncknuna]

Oh, great! I'll try to take a look at adding layers to Line today, following this commit that added it to Bar (8a817ec#diff-5799e61b0b5bfcb7468aee7a5406e61a). If there's a better thing for me to look at, let me know!

[plouc]

And now, thanks to @ncknuna, we have layers support for Line component too!

[pfreedmanJG]

For now, it's supported on Bar and ScatterPlot components. You can find a working example of it here using the ScatterPlot component.

Has anyone got a link similar to the ScatterPlot one to some code showing a custom layer in use on the Bar component?

[pfreedmanJG]

Ok, here is an example I've written that is vaguely similar to what OP wanted.

[plouc]

Thank you @pfreedmanJG! I've used your example as a base to reproduce what @ellipticaldoor wanted to achieve => https://codesandbox.io/s/m4ro13jjn8

[pfreedmanJG]

@plouc That's great, I was wondering how to get circles rendering on top of the points!

[yojeek]

@plouc sorry for the slight off-topic, but why your codepen example only works if x value contains series of integers "0", "1", etc. If I change it to anything but integers it breaks inside xScale(index).

[plouc]

@yojeek, because the bar chart only supports ordinal values for now, other charts (line, scatterplot) support other types like linear/time/log scales.

[plouc]

@yojeek, sorry I don't respond to emails, please use GitHub instead. I had a look at the example, and fixed it => https://codesandbox.io/s/zrk1o3j29p, the problem was the use of bar.data.index instead of bar.data.indexValue.

[EduardoAC]

@plouc are you giving supporting other @nivo components as Layers instead of D3?

[simoami]

@plouc Would it be best to support an entirely new Composite chart container instead of making Bar chart as the primary container? So it controls the layers and knows what layers to strip off from the inner charts. There might be other benefits.

[plouc]

@simoami, some charts supports the same layer ids, but contains different things, but not every chart share the same layers as others. Also nivo provides specific packages for each chart type, and this approach assumes that all chart types are installed.

[simoami]

Thanks @plouc. I was just throwing an idea in case it offers a predictable composition. To not be aware of charts, you could have an explicit declaration. <CompositeChart><Chart1 /><Chart2 /></CompositeChart>. Then the composite chart can share a layer service that the inner charts can choose to support. Something react contexts can help with.

[VolodymyrKornetskyi]

@plouc is it possible to add tooltip to Line chart in such approach?

[andreas-ateles]

@plouc same question as above, is there a way to make the tooltips show up for both the bar and line chart?
In my case preferably in a single tooltip box, with all graphed Y values for the current X value.

@VolodymyrKornetskyi did you have any luck solving that?

[plouc]

@andreas-ateles you could probably achieve this in your custom layer, you could for example use the useTooltip() hook from @nivo/tooltip to display some extra tooltips.

[sarang12]

@plouc Is it possible to add a right axis corresponding to the line layer in this type of chart?https://codesandbox.io/s/zrk1o3j29p

[rosshoyt]

@yojeek, because the bar chart only supports ordinal values for now, other charts (line, scatterplot) support other types like linear/time/log scales.

@plouc Scatterplot with xScale={{ type: 'point', min: 0, max: 'auto' }} works with custom D3 Line layer, implemented following your description here. Heres how that looks:

However, when changing the Scatterplot type to time, the xScale function fails in the same LineGenerator function used above.

The changed ResponsiveScatterPlot settings:

xScale={{ 
    type: 'time',  
    useUTC: false,
    format: '%m-%d',
    precision: 'day'
}}
xFormat="time:%m-%d"`
axisBottom={{
  format: '%b %d',
  tickValues: 'every 4 days',
  // etc
}}

Custom Line layer excerpt:

function Line({ data, xScale, yScale}) { 
        const lineGenerator = line().curve(curveNatural)
            .x(d => xScale(d.x))
            .y(d => yScale(d.y));
       // etc

Error produced:

<path> attribute d: Expected number, "MNaN,289CNaN,282.…"

The x values are, in both cases, simply M-D date formats, e.g. 4-23

I'm working with Scatterplot version 0.72, and can provide a CodePen if needed.

[alissaVrk]

Hi, I made an example of a combined bar with a line chart.
the bars and the line values have different scales - so there is an axis on the left for the bars and an axis on the right for the line.

I also added a tooltip - I made a combined tooltip for both values, but there are many different possibilities here...
Also if you already have some lib for tooltips in your project (like react-tooltip or floating-ui) you can use the tooltip lib for the tooltips.

@plouc, thank you for making the code easy enough to navigate :)
I do think that this would have been easier if useLine, for example, would have been exposed