3

I am novice with billboard.js, tried to do a very simple thing: changing the color of a line.

var chart = bb.generate({
  data: {
    columns: [
    ["data1", 30, 20, 50, 40, 60, 50],
    ["data2", 200, 130, 90, 240, 130, 220]
    ],
    type: "line",
    bindto: "#dataColor"
});

chart.data.colors({data1:'orange'});

In this example, I can change the color of data1 in orange, but data1 is not a variable, I want something like this:

var lab1="toto",lab2="titi";
var chart = bb.generate({
  data: {
    columns: [
    [lab1, 30, 20, 50, 40, 60, 50],
    [lab2, 200, 130, 90, 240, 130, 220]
    ],
    type: "line",
    bindto: "#dataColor"
});

chart.data.colors({lab1:'orange'});

But this doesn't work, I have to hard code the value of lab1: chart.data.colors({toto:'orange'})

user3926254
  • 31
  • 2

1 Answers1

1

Try enclosing the it inside square brackets. This should replace it with the string value of lab1.

chart.data.colors({[lab1]:'orange'});

From MDN

Starting with ECMAScript 2015, the object initializer syntax also supports computed property names. That allows you to put an expression in brackets [], that will be computed and used as the property name.

If you are not using ES2015, You can always do

var d = {};
d[lab1] = 'orange';
chart.data.colors(d);
AKT
  • 942
  • 6
  • 16