javascript - Remove 0's (zeros) from x-axis of bar chart in Chart.js - Stack Overflow

admin管理员组

文章数量:1434943

I want to show nothing than 0 for zero values on the x-axis (Jan - May). The code below is for the plot. Any help/suggestion appreciated

$scope.showChart = function (finalLabels, finalDatasets, finalTitle, plotType,dateRange) {

    var ctx = document.getElementById("chart").getContext('2d');
    var plotConfig = {

        type: plotType,
        data: {
            labels: finalLabels,
            datasets: finalDatasets
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            layout: {
                padding: {left: 0, right: 0, top: 10, bottom: 0}
            },
            plugins: {
                labels: {
                    render: 'value',
                    fontSize: 10,

                }
            },
            legend: {
                display: false,
                labels: {
                    fontSize: 10,
                    boxWidth: 35
                }
            },
            scales: {
                xAxes: [{
                    ticks: { autoSkip: false,fontSize:10
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Testing',
                        fontSize:10
                    },
                    ticks: {
                        beginAtZero: true,
                        fontSize:10
                    }
                }]
            },

       /*     title: {
                display: true,
                text: [finalTitle.toUpperCase(),dateRange],
                fontSize:10,
                padding:0
            }*/
        }
    };
    if ($scope.chart) {
        $scope.chart.destroy();
    }

    $scope.chart = new Chart(ctx, plotConfig);
};

I want to show nothing than 0 for zero values on the x-axis (Jan - May). The code below is for the plot. Any help/suggestion appreciated

$scope.showChart = function (finalLabels, finalDatasets, finalTitle, plotType,dateRange) {

    var ctx = document.getElementById("chart").getContext('2d');
    var plotConfig = {

        type: plotType,
        data: {
            labels: finalLabels,
            datasets: finalDatasets
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            layout: {
                padding: {left: 0, right: 0, top: 10, bottom: 0}
            },
            plugins: {
                labels: {
                    render: 'value',
                    fontSize: 10,

                }
            },
            legend: {
                display: false,
                labels: {
                    fontSize: 10,
                    boxWidth: 35
                }
            },
            scales: {
                xAxes: [{
                    ticks: { autoSkip: false,fontSize:10
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Testing',
                        fontSize:10
                    },
                    ticks: {
                        beginAtZero: true,
                        fontSize:10
                    }
                }]
            },

       /*     title: {
                display: true,
                text: [finalTitle.toUpperCase(),dateRange],
                fontSize:10,
                padding:0
            }*/
        }
    };
    if ($scope.chart) {
        $scope.chart.destroy();
    }

    $scope.chart = new Chart(ctx, plotConfig);
};

• javascript
• chart.js

Share Improve this question Follow edited Jan 14, 2019 at 17:17 Hari_pb asked Jan 14, 2019 at 17:12 Hari_pbHari_pb 7,43644 gold badges4949 silver badges5454 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

If you are using the DataLabels plugin, here is how you can do a scriptable display option.

In the plugin options you can use a function to dictate whether DataLabels shows a label. So in this case its a simple check if the value is greater than 0.

var ctx = document.getElementById("myChart");
debugger;
var data = {
  labels: ["Jan 18", "Feb 18", "Mar18", "Apr 18", "May 18", "Jun 18", "Jul 18"],
  datasets: [{
    label: "# of Votes",
    data: [0, 0, 0, 0, 10, 12, 24]
  }]
}
var myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  legend: {
    "display": false
  },
  plugins: [ChartDataLabels],
  options: {
    plugins: {
      // Change options for ALL labels of THIS CHART
      datalabels: {
        color: "#36A2EB",
        anchor: "end",
        display: function(context) {
          var index = context.dataIndex;
          var value = context.dataset.data[index];
          return value > 0; // display labels with a value greater than 0
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="myChart" width="100" height="100"></canvas>

How about formatting text shown on animation.onComplete?

var ctx = document.getElementById("myChart");
debugger;
var data = {
  labels: ["2 May", "9 May", "16 May", "23 May", "30 May", "6 Jun", "13 Jun"],
  datasets: [{
    data: [0, 0, 56, 50, 88, 60, 45],
    backgroundColor: "#EEEEEE"
  }]
}
var myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  legend: {
    "display": false
  },
  options: {
    "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';

        this.data.datasets.forEach(function(dataset, i) {
          var meta = chartInstance.controller.getDatasetMeta(i);
          meta.data.forEach(function(bar, index) {
            var data = dataset.data[index];
            if (data) {
            ctx.fillText(data, bar._model.x, bar._model.y - 5);
            }
          });
        });
      }
    }
  }
});

<!doctype html>
<html>
<head>
  <title>example./test</title>
</head>
<body>
  <canvas id="myChart" width="100" height="100"></canvas>
  <script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
</body>
</html>

I added just a condition in the plugin's render and it worked perfectly.

plugins: {
           labels: {
                  render: function (args) {
                            if (args.value != 0)
                                return args.value;
                        },
                  fontSize: 10

                    }
          },

本文标签： javascriptRemove 039s (zeros) from xaxis of bar chart in ChartjsStack Overflow