please support chart type bar, horizontal bar and polar, thanks

[adamshe]

it will be nice to support bar, horizontalBar, polarArea.

[emn178]

If this apply to bar chart, I think it can only apply to stacked. looks polarArea can apply this. I will try polarArea first.

[emn178]

v0.15.0 supports polar area now. please try it.

[emn178]

v1.1.0 supports bar chart now. please try it.

[designed2use]

Any chance of this supporting horizontal bars soon? Thanks

[qubiack]

@designed2use I create a fork with horizontal bar support and @emn178 I add also pull request for this changes. If you need something more with support for horizontal bar tell me about It - I can develop this subject.

[RopoMen]

If this plugin would support horizontal bar charts as well. I could drop 'chartjs-plugin-datalabels' from my project.

[DenjanD]

Please support the plugin for horizontal bar charts. That would be very nice

[JeSuisUnCaillou]

I'd love to have the support for horizontalBar too. That would be awesome !

[princessellen]

Yeah, I agree. horizontalBar support would be awesome.

[etacla]

Try to add: var config = { type: 'horizontalBar', data: barChartData, options: { elements: { rectangle: { borderWidth: 2, } }, responsive: true, legend: { position: 'bottom', }, title: { display: true, text: Titulo }, scales: { xAxes: [{ display: false, ticks: { beginAtZero: true } }] }, animation: { duration: 1000, onComplete() { let chartInstance = this.chart; let ctx = chartInstance.ctx; // ctx.fillStyle = this.scale.textColor ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillStyle = '#fff'; this.data.datasets.forEach(function (dataset, i) { var label = dataset.label; var meta = chartInstance.controller.getDatasetMeta(i); meta.data.forEach(function (bar, index) { var data = dataset.data[index]; if (label.indexOf('%') >= 0) data += "%"; ctx.fillText(data, bar._model.x - 15, bar._model.y); }); }); } } }

};

[AbidKhairyAK]

Just wanna share my code, this is modified version of @etacla code, many thanks to him

// bar chart
var barOptions = {
    tooltips: {
        backgroundColor: "rgb(255,255,255)",
        bodyFontColor: "#858796",
        titleMarginBottom: 10,
        titleFontColor: '#6e707e',
        titleFontSize: 14,
        borderColor: '#dddfeb',
        borderWidth: 1,
        xPadding: 15,
        yPadding: 15,
        displayColors: false,
        caretPadding: 10,
        callbacks: {
            label: function(tooltipItem, chart) {
                return tooltipItem.yLabel + ': ' + tooltipItem.xLabel + ' User';
            }
        }
    },
    plugins: {
        labels: {
            render: 'percentage'
        }
    },
    animation: {
        duration: 1000,
        onProgress() { <======================== code that render label on bar chart ======
            let chartInstance = this.chart;
            let ctx = chartInstance.ctx;

            // ctx.fillStyle = this.scale.textColor

            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillStyle = '#fff';

            this.data.datasets.forEach(function (dataset, i) {
                var label = dataset.label;
                var meta = chartInstance.controller.getDatasetMeta(i);
                var total = dataset.data.reduce(function(total, num) { return total + num; })

                meta.data.forEach(function (bar, index) {
                    var data = dataset.data[index] / total * 100;
                    data = Math.ceil(data) + '%';
                    ctx.fillText(data, bar._model.x - 15, bar._model.y);
                });
            });
        }
    }
};

var research = $('#research-chart');
var researchData = {
        labels: ['Biocontrol', 'Molecular', 'Mycotoxin'],
        datasets: [{
            label: 'Research Interest',
            data: [14, 7, 23],
            backgroundColor: '#2ec551',
        }]
};
var researchChart = new Chart(research, {
        type: 'horizontalBar',
        data: researchData,
        options: barOptions
});