score:-1

Accepted answer

i solved it. here used animation: option to set data value at top of bar.

<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.6.0/chart.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>

<body>
  <canvas id="canvas"></canvas>
  <script>
    var barchartdata = {
      labels: ['6/30', '7/31', '8/31'],
      datasets: [{
          type: 'line',
          label: 'line',
          bordercolor: 'red',
          borderwidth: 2,
          fill: false,
          data: [73.6, 72.0, 71.0],
          yaxisid: 'y-axis-2'
        },
        {
          type: 'bar',
          label: 'dataset 2',
          backgroundcolor: 'blue',
          data: [1328, 1380, 1380],
          bordercolor: 'white',
          borderwidth: 2
        }, {
          type: 'bar',
          label: 'dataset 3',
          backgroundcolor: 'yellow',
          data: [978, 993, 980],
        },
      ]

    };

    window.onload = function() {
      var ctx = document.getelementbyid('canvas').getcontext('2d');

      window.mybar = new chart(ctx, {
        type: 'bar',

        data: barchartdata,
        options: {
          responsive: true,
          title: {
            display: true,
            text: 'chart.js combo bar line chart'
          },
          tooltips: {
            mode: 'label',
            intersect: true,
            enabled: false
          },
          scales: {
            xaxes: [{
              display: true,
              gridlines: {
                display: false
              },
              labels: {
                show: true,
              }
            }],
            yaxes: [{
                type: "linear",
                display: true,
                position: "left",
                id: "y-axis-1",
                gridlines: {
                  display: false
                },
                labels: {
                  show: true,

                },
                ticks: {
                  beginatzero: true,
                  stepsize: 500,
                  suggestedmax: 3000
                },
              },
              {
                type: "linear",
                display: true,
                position: "right",
                id: "y-axis-2",
                gridlines: {
                  display: false
                },
                labels: {
                  show: true,

                },
                ticks: {
                  stepsize: 10,
                  min: 0,
                  max: 100, // your absolute max value
                  callback: function(value) {
                    return (value / 100 * 100).tofixed(0) + '%'; // convert it to percentage
                  },
                },
                scalelabel: {
                  display: true,
                  labelstring: 'percentage',
                },

              }
            ]
          },
          hover: {
            animationduration: 0
          },
          animation: {
            duration: 1,
            oncomplete: function() {
              var chartinstance = this.chart,
                ctx = chartinstance.ctx;
              ctx.font = chart.helpers.fontstring(chart.defaults.global.defaultfontsize, chart.defaults.global.defaultfontstyle, chart.defaults.global.defaultfontfamily);
              ctx.textalign = 'center';
              ctx.textbaseline = 'bottom';
              ctx.fillstyle = "#666";
              //ctx.fillstyle = dataset.type == "line" ? "blue" : "black";

              this.data.datasets.foreach(function(dataset, i) {
                ctx.fillstyle = dataset.type == "line" ? "blue" : "black";

                var meta = chartinstance.controller.getdatasetmeta(i);
                meta.data.foreach(function(bar, index) {
                  var data = dataset.data[index];
                  if (dataset.type == "line") {
                    data = data + '%';
                  }


                  ctx.filltext(data, bar._model.x, bar._model.y - 5);
                });
              });
            }
          },
        },
      });
    };
  </script>
</body>

</html>

score:-1

the chart expects data that needs to be shown, rather than a hide/display logic.

you can manually filter out;

    let myset = barchartdata.datasets
    barchartdata.datasets = []
    for(i = 0;i< myset.length; i++){
        if(myset[i].label){
            barchartdata.datasets.push(myset[i])
        }
    }

score:0

there is a plugin with exactly the wanted features for the values over your bars, chartjs-plugin-datalabels (github).

for your percentages on the right yaxis there are many other answers. i recommend this one.


Related Query

More Query from same tag