area-step chart when rotated

[denny313]

Hi.
First, thank you for billboard.js

i have problem with billboard.js

Description

I want that figure like this with rotated

bb.generate({
    bindto: "#chart",
    data: {
        x:"x",
        columns: [
            ["x","1","2","3","4","5","6"],
            ["data1", 30, 200, 100, 170, 150, 250],
            ["data2", 130, 100, 140, 35, 110, 50]
        ],
        types: {
          data1: "bar",
          data2: "area-step"
        },
        colors: {
          data1: "red",
          data2: "green"
        }      
    }
  , axis:{
    //rotated:true
    rotated:false 
  }            
});

but when i rotate it and

bb.generate({
    bindto: "#chart",
    data: {
        x:"x",
        columns: [
            ["x","1","2","3","4","5","6"],
            ["data1", 30, 200, 100, 170, 150, 250],
            ["data2", 130, 100, 140, 35, 110, 50]
        ],
        types: {
          data1: "bar",
          data2: "area-step"
        },
        colors: {
          data1: "red",
          data2: "green"
        }
      
    }
  , axis:{
    rotated:true
    //rotated:false
    
  }
            
});

then area-step is something wrong....
area-chart slip half unit...

if i make something wrong. please check me out

thanks

[netil]

Hi @denny313, thanks for the report.
It seems having an issue on step related types. I'll try fixing that.

[netil]

When chart is rotated, computes its coordinate values simply inverting the x and y axes with the help of the d3's related functions.

For the step type, d3.curvStep is used.

Non step types, just inverting the x/y, works well, but for the step it doesn't work as others. Because of the computation nature it has.

It should find different way on getting computed coordinate values(not using the D3's method) for this case.

[denny313]

i change d3.curvStep script little bit, and it solved out.

when billboardchart is always rotated, i solve this by change x,y in d3.v4.js , function Step(context,t)

(i use d3js version5.5.0 )

here is the example

function Step(context, t)
...
 var x1 = this._x*(1-this._t) + x*this._t
this._context.lineTo(x1, this._y)
this._context.lineTo(x1, y)
....

->
function Step(context, t)
...
 var y1 = this._y*(1-this._t) + y*this._t
this._context.lineTo(this._x, y1)
this._context.lineTo(x, y1)
....

it is temporary solve. in condition of all chart is rotated.
but my charts are rotated, so i use this

may it help others....

[netil]

Thanks! @denny313 for the workaround.
I'll try be considering on implementing this to solve the issue.

[netil]

@denny313, fixed the issue. You can use via the nightly build from:

• https://github.com/naver/billboard.js/tree/nightly/dist

I made an online working demo. You can check the rotated step is rendering as expected.

• https://jsbin.com/zekusak/edit?html,js,output
  

[denny313]

Thank you!
It works very well !!!!

감사합니다~~~ 잘쓰겠습니다~~!!