Mix bar and line charts with Rickshaw (d3 based graphing library for js)

Question

When using the d3 plotting library Rickshaw the renderer (either area, line, or bar) is set on the graph. Is there anyway to have a graph with multiple series where one series is plotted as a line and another as a bar?

Answer 1

You can now combine charts on rickshaw!

The renderer type is called 'multi'. How it works is that you give each individual series it's own distinct renderer i.e.

var graph = new Rickshaw.Graph({
    element: el, width: 960, height: 500,
    padding: { top: 0, right: 0, bottom: 0, left: 0 },
    renderer: 'multi',
    series: [
        {
            renderer: 'line',
            data: [
                { x: 0, y: 40 },
                { x: 1, y: 49 }
            ]
        },
        {
            renderer: 'bar',
            data: [
                { x: 0, y: 30 },
                { x: 1, y: 60 }
            ]
        },
    ]
});

Full example here https://github.com/shutterstock/rickshaw/blob/a240899625c2d83961b3e682cd77ab8e5199a866/tests/Rickshaw.Graph.Renderer.Multi.js

Answer 2

I tried same use case.

I modified Rickshaw source. But I found this one.

nvd3 supports mixture graph.