CODEWITHSUNDEEP
javascriptcharts
dadsa
dadsa

Reputation: 227

How to put the Y-axis of a chart to the right-side of it

I created a chart in Billboard.js which looks like this:

var chart = bb.generate({
    "data": {
        "type": "line",
        "x": "x",
        "columns": columns
    },
    "point": {
        "show": false
    },
    "legend": {
        "show": false
    },
    "axis": {
        "x": {
            "localtime": false,
            "type": "timeseries",
            "tick": {
                count: 7,
                "format": "%b %d, %Y",
                "rotate": 45,
                "multiline": true
            },
             "label": {
                "text": label,
                "position": "outer-center"
            },
        },
        "y": {
            "label": {
                "text": "Energy (kWh)",
                "position": "outer-middle"
            },
        },
    },
    "bindto": "#main-chart"
});

Now it looks like the classic style, X axis on the bottom and Y axis on the left. I want to move the Y axis on the right of the table.

I've tried many ways to do it but without success like these ones:

-changing its name from y to y2

-adding the same code but with y2:

"y": {
    "label": {
    "text": "Energy (kWh)",
        "position": "outer-middle"
    },
},

"y2": {
    "label": {
        "text": "Energy (kWh)",
        "position": "outer-middle"
    },
},

I addied show attribute inside the label like this:

"y": {
    "label": {
        "show": false,
        "text": "Energy (kWh)",
        "position": "outer-middle"
    },
},
"y2": {
    "label": {
        "show": true,
        "text": "Energy (kWh)",
        "position": "outer-middle"
    },
},

Any ideas?

Upvotes: 1

Views: 1459

Answers (2)

Nouphal.M
Nouphal.M

Reputation: 6344

Try 

var chart = bb.generate({
  "data": {
    "columns": [
    ["data1", 30, 200, 100, 400, 150, 250],
    ["data2", 50, 20, 10, 40, 15, 25]
    ],
    "axes": {
      "data1": "y2" // set additional y axis
    }
  },
  "axis": {
    "y": {
      "show": false // hide default y axis
    },
    "y2": {
      "show": true
    }
  },
  "bindto": "#AdditionalYAxis"
});

I have tried it on their demo from github. There is an option axis where you can simply hide the axis. Hope this helps.

Working Example: https://jsfiddle.net/k3o1ws47/

Upvotes: 1

Jae Sung Park
Jae Sung Park

Reputation: 910

I think, @Nouphal pointed exactly what to do. The key point is set data.axes options to bound datas to y2 axis.

I made working demo with your code(except the data value), so replace it setting with your data and will work.

var chart = bb.generate({
    "data": {
        "type": "line",
        "x": "x",
        "columns": [
          // replace with your data value
          ['x', '2017-10-01', '2017-10-02', '2017-10-03', '2017-10-04', '2017-10-05', '2017-10-06'],
          ["data1", 30, 200, 100, 400, 150, 250],
          ["data2", 50, 20, 10, 40, 15, 25]
        ],
        "axes": {
          "data1": "y2",
          "data2": "y2"
        }
    },
    "point": {
        "show": false
    },
    "legend": {
        "show": false
    },
    "axis": {
        "x": {
            "localtime": false,
            "type": "timeseries",
            "tick": {
                count: 7,
                "format": "%b %d, %Y",
                "rotate": 45,
                "multiline": true
            },
             "label": {
                "text": "label",
                "position": "outer-center"
            },
        },
        "y": {
          "show": false
        },
        "y2": {
            "show": true,
            "label": {
                "text": "Energy (kWh)",
                "position": "outer-middle"
            },
        },
    },
    "bindto": "#main-chart"
});
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">
</head>
<body>
  <div id="main-chart"></div>
</body>
</html>

Upvotes: 0

Related Questions