Dygraphs: Show X name in legend

Question

I have a dygraph charting two decimal numbers against each other. I provide the data in the form:

[[0.4,0.5],[0.6,0.7]]

etc.

I'm trying to use the labels property on the settings to force the graph to show a label for the x values but it's just ignoring it and correctly using the second value.

Is there a way I can have the name shown in the legend?

Here's what the graph will look like (obviously with different data!)

<div id="OptimisationCloud" style="width:100%;height:450px"></div>
<script type="text/javascript">

$(document).ready(function () {
g = new Dygraph(
                document.getElementById("OptimisationCloud"),
                [[0.4,0.5],[0.6,0.7]],
                {
                    strokeWidth: 0.0,
                    drawPoints: true,
                    xlabel:"Annualised Volatility",
                    ylabel:"Annualised Return",
                    axes: {
                        x: {
                            axisLabelFormatter: function (x) {
                                return (x * 100).toFixed(0) + "%";
                            }
                        },
                        y: {
                            axisLabelFormatter: function (y) {
                                return (y * 100).toFixed(0) + '%';
                            }
                        }
                    },
                    labels:["Ann Vol", "Ann Ret"],
                    colors: ["#1f4e6c"],
                    valueFormatter: function (y) {
                                return (y * 100).toFixed(2) + '%';
                            }
                }
            );
});

</script>

as I say, Ann Ret comes through but Ann Vol is not shown.

Answer 1

This is expected behaviour.

For example, if I had a time series, I would want it to show

2013-12-25: Presents: 5, Xmas Tree: 1

I understand that you want to show a value rather than time. So with the above in mind, you just need to pass your x-axis as another y-axis, e.g.

[
    //X   Y1   Y2
    [0.4, 0.4, 0.5]
    [0.6, 0.6, 0.7]
]

AND hide the resulting legend label.

My example code:

g = new Dygraph(
    document.getElementById("OptimisationCloud"),
    [
        [0.4,0.4,0.5],
        [0.6,0.6,0.7],
    ],
    {
        strokeWidth: 0.0,
        drawPoints: true,
        axes: {
            x: {
                axisLabelFormatter: function (x) {
                    return (x * 100).toFixed(0) + "%";
                },
                valueFormatter: function (y) {
                    return ""; //Hide legend label
                }
            },
            y: {
                axisLabelFormatter: function (y) {
                    return (y * 100).toFixed(0) + '%';
                },
                valueFormatter: function (y) {
                    return (y * 100).toFixed(2) + '%';
                }               
            },
            y2: {
                axisLabelFormatter: function (y) {
                    return (y * 100).toFixed(0) + '%';
                },
                valueFormatter: function (y) {
                    return (y * 100).toFixed(2) + '%';
                }
            }
        },
        labels:["X", "Ann Vol", "Ann Ret"], //The "X" is hidden by returning the empty string above
        xlabel: "Annualised Volatility",
        ylabel: "Annualised Return",
        colors: ["#1f4e6c"],
    }
);