javascript rickshaw bar graph width=NaN

Question

I'm trying to draw a rickshaw bar graph with a set of very basic data, for some reason when I create myself the series array (with color: string, data: [{}] and name: string) I get this error:

Error: Invalid value for attribute width="NaN"

and if I look at the elements created for each bar of the graph, they indeed have width=NaN:

var json = '@Html.Raw(Json.Encode(Model))';
    var array = $.parseJSON(json);
    var dataArray = [];

    var palette = new Rickshaw.Color.Palette({ scheme: 'classic9' });

    for (var i = 0; i < array.length; i++) {
        dataArray.push( 
            {
                color: palette.color(),
                data: [{x: i, y: array[i].Value}],
                name: array[i].Key
            });
    }

    console.log(dataArray);

    var graph = new Rickshaw.Graph({
        element: document.querySelector("#chart"),
        renderer: 'bar',
        width: 420,
        height: 280,
        series: dataArray
    });

    graph.render();

<rect x="0" y="208.95816646947355" width="NaN" height="71.04183353052643" transform="matrix(1,0,0,1,0,0)" fill="#2f254a"></rect>
<rect x="0" y="168.32890323029957" width="NaN" height="40.6333259065763" transform="matrix(1,0,0,1,0,0)" fill="#491d37"></rect>
<rect x="0" y="133.60905003661946" width="NaN" height="34.71985319368011" transform="matrix(1,0,0,1,0,0)" fill="#7c2626"></rect>

thanks.

Answer 1

Actually its a known issue with rickshaw: one series with multiple data points works, multiple series with multiple data points works, multiple series each having only one data point doesn't work. This was my case.

Changed the way I design my graph to solve that.

thanks !