chart_key in o-charts

[Clevejones]

Hi Team

Would there be a easy way to turn off the key class when not needed and when needed turn it back on.

Many thanks.

[kavanagh]

Why would you not have a key?

[Clevejones]

Hi Luke With the chart_key has been set a 'class' to be above the chart, however would be helpful if l can set the style myself to the design show below.

[kavanagh]

I think for now you should switch off the key and implement a custom horizontal key if that's what you want. In the example below you'll see key: false... that turns off the key.

    var oCharts = require('o-charts');
    var d3 = require('d3');
    d3.select('#views').append('div').data([{
        key: false,
        x: { series: 'date' },
        y: { series: ['value', 'value2'], reverse: false },
        data: [
            { date: new Date('01/01/2001'), value: 0.583, value2: 1.583},
           ...
        ]
    }]).call(oCharts.chart.line);

However when you have lots of line, as in your example, I think a horizontal key is a bad fit because it's hard to read, especially when you have highly variable labels lengths (eg Austria and Bosnia Herzegovina).

In this case I would prefer one of two other solutions:

1. label the lines directly at the right end of the line (best in this case)
2. label the lines within the bounds of the plot area

Long term we could provide the ability for keys on lines charts to have a "horizontal" orientation as an alternative for programatic users (ie not exposed in Nightingale for now). However I think it's usually only readable when it's approx five or fewer lines and best for space saving when you really need it eg newspaper or fixed ratio charts eg Master images.

[peter-mouland]

The horizontal key has now been released. As far as turning off the key in nightingale, i don't think this would ever be a good idea. As Luke says, we have bigger plans for how to customise the key.

As you can turn it off programmatically (as described above using key: false). I'm going to close this issue. Please re-open if there is more you are after!