Chartjs mixed type display want to set display none for some bar

-1πŸ‘

βœ…

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>

πŸ‘: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.

πŸ‘:-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])
        }
    }

Leave a comment