Ng2-charts: Canvas being built, no chart created

[yusijs]

Having some odd issues here:

Did some simple debugging, and the data comes through (printing out after the canvas), just doesn't draw the chart. I've tried with Chart.js 1.1.1 (stable) and 2.0 (beta.2) and no go. Any ideas?

[mwijnands]

Maybe try and search the github issues first. https://github.com/valor-software/ng2-charts/issues/98

[yusijs]

My apologies - tried searching, but poor search terms, clearly. Thanks, I'll give it another try later today.

[yusijs]

Alright, I've just been trying this again, and I'm still not able to get it to work. As far as I can tell that other issue didn't have any resolution either?

Anyways, I did some research into the script, and I found an.. oddity. I had to hack a bit on the system js bundler, but basically:
BaseChart.prototype.refresh gets called on init / on change, and the first thing called is this:

if (this.options.responsive && this.parent.clientHeight === 0) {
        return setTimeout(function() {
          console.log(this.parent);
          process.exit();
          return _this.refresh();
        }, 50);
      }

The odd thing here is that (at least in chrome for me), this.parent.clientHeight doesn't exist. this.parent is the window. So, I added some simple code to bypass that (&& 1=2) to get to the part where it actually creates a friggin chart - so to this code:
this.chart = this.getChartBuilder(this.ctx, data, this.options);

This functions seems simple enough:

BaseChart.prototype.getChartBuilder = function(ctx, data, options) {
      return new Chart(ctx)[this.chartType](data, options);
    };

This gets rid of error messages, but now the entire canvas is.. gone. So I went back a little and figured that the setTimeout had to be there for a reason. clientHeight isn't something that is used on the window element (the target for this.parent), so I'm assuming the clientHeight is intended for something else. I don't know what though. Logging out this.parent.clientHeight always returns undefined for me though, and never changes.

I've been trying my best to figure out what could be the problem here, but I'm at a loss. I'm using SystemJs, could that be part of the issue?

Any suggestions would be appreciated.

[valorkin]

Try Charts 1.0.2

[yusijs]

I am

[danbucholtz]

I am having the same issue. Literally copy and pasted the example for the ng2-charts examples page for line-chart. Any thoughts? I can happily provide an example.

Thanks,
Dan

[zackarychapple]

@danbucholtz I was having the same issue as y'all added the following css and charts started showing up as expected.

.chart-legend, .bar-legend, .line-legend, .pie-legend, .radar-legend, .polararea-legend, .doughnut-legend {
  list-style-type: none;
  margin-top: 5px;
  text-align: center;
  -webkit-padding-start: 0;
  -moz-padding-start: 0;
  padding-left: 0
}

.chart-legend li, .bar-legend li, .line-legend li, .pie-legend li, .radar-legend li, .polararea-legend li, .doughnut-legend li {
  display: inline-block;
  white-space: nowrap;
  position: relative;
  margin-bottom: 4px;
  border-radius: 5px;
  padding: 2px 8px 2px 28px;
  font-size: smaller;
  cursor: default
}

.chart-legend li span, .bar-legend li span, .line-legend li span, .pie-legend li span, .radar-legend li span, .polararea-legend li span, .doughnut-legend li span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 5px
}
.chart {display: block; width: 100%;}

[zackarychapple]

@valorkin should we look at rolling that CSS into the component definitions?

[butters16]

This was the final piece to my puzzle. Thank you @zackarychapple

[yusijs]

Yeah, solved it for me as well. Thanks @zackarychapple!

[valorkin]

Yes, I will really appreciate PR with this css, may be charts.js lib too

On Sat, Apr 23, 2016, 06:58 Ronnie [email protected] wrote:

Yeah, solved it for me as well. Thanks @zackarychapple
https://github.com/zackarychapple!

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/valor-software/ng2-charts/issues/137#issuecomment-213661113

[valorkin]

updated to chart.js v2 and ng2 rc.1