novus / nvd3

A reusable charting library written in d3.js
http://nvd3.org/
Other
7.23k stars 2.14k forks source link

how I can set the minimum height of each item of stacked multibar chart line #1928

Open studentIvan opened 7 years ago

studentIvan commented 7 years ago

For example if I have this case is ok { a: 3, b: 4, c: 8 } But for this is terrible { a: 3, b: 4, c: 900000 } I need to display the a and b with 10% height of c, is it real?

studentIvan commented 7 years ago

Right now I made some hack with my code:

          var totalSum = $scope.chartData
          .map(function (e) { return e.value; })
          .reduce(function (a, b) { return a + b; }, 0); // total Y amount

          var fixY = function fixY (value) {
            var minPercentHeight = 0.27; // minimum height of data item
            return (value / totalSum < minPercentHeight) ? totalSum * minPercentHeight : value;
          };

          vm.dataArray = $scope.chartData.map(function (e) { // save y as fixed y and v as original
            return { key: e.title, color: e.color, values: [{ y: fixY(e.value), v: e.value }]};
          });

          var selectedData = null;

in the options:

            multibar: {
              dispatch: {
                elementMouseover: function (e) {
                  selectedData = e.data;
                },
              },
            },
           // ...
           tooltip: {
              valueFormatter: function (d, i) {
                return d3.format(',f')(selectedData.v || d, i);
              },
            // ...
jeznag commented 7 years ago
But for this is terrible { a: 3, b: 4, c: 900000 }
I need to display the a and b with 10% height of c, is it real?

You want to create a misleading chart? That sounds unethical.