jtblin / angular-chart.js

Reactive, responsive, beautiful charts for AngularJS using Chart.js: http://jtblin.github.io/angular-chart.js
Other
2.67k stars 759 forks source link

Scale issue mixing pie and bar charts #630

Open pietrofxq opened 7 years ago

pietrofxq commented 7 years ago

Overview

I'm using chart-base to toggle between bar and pie charts. The issue is that the bar chart never displays the first bar, because the first value in the Y scale is the lowest value of the bars, so the first bar has no height. This is avoided by configuring the options:

options: {
  scales:  {
    yAxes: [{
      ticks: {
        begintAtZero: true
      }]
    }
  }
}

The issue is that it's not possible to just leave this option when using Pie chart, because ChartJS assumes that xAxes is also defined in your options obj and throws an error because it tries to use the method concat(), and xAxes isn't defined.

Defining xAxes fix the issue:

options: {
  scales:  {
    xAxes: [{
      display: false
    }]
  }
}

Now the issue is that in the pie chart, the Y axes is always displayed (even though it's useless in the pie chart).

I think this can be fixed by assigning the display of yAxes to a scope variable and changing it, but I have a lot of charts in the page and I'd need to keep track of each one. Is there a better solution to fix this?

Please make sure to review and check all of these items:

Step to reproduce

Ensure you add a link to a plunker, jsbin, or equivalent. Issues without repro steps may be closed immediately.

https://jsfiddle.net/vz4qhqpw/376/

gseroul commented 7 years ago

Hi, I found a way to do this. In your click function that do the chartType switch : if (self.chartType == "pie") { self.chartType = "bar"; self.options.legend.display = false; self.options.scales = { yAxes: [{ ticks: { beginAtZero: true } }], xAxes: [] }; } else { self.chartType = "pie"; self.options.legend.display = true; delete self.options.scales; }

The idea is to define options.scales x and y axes for bar or graph, but to remove this ref for pie.