angular-chart.js icon indicating copy to clipboard operation
angular-chart.js copied to clipboard

Scale issue mixing pie and bar charts

Open pietrofxq opened this issue 8 years ago • 1 comments

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:

  • [X] Use latest version of the library
  • [X] Make sure you've included all the dependencies e.g Chart.js, angular, etc.
  • [X] Include a repro case, see below.

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/

pietrofxq avatar May 12 '17 13:05 pietrofxq

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.

gseroul avatar Oct 18 '17 13:10 gseroul