[Chartjs]-Chart.js My DATA doesn't go along with the label,

by

1👍

✅

I suggest to use only one dataset and define specific color for each bar using an array asbackgroundColor property:

datasets: [{
    label: "my set",
    data: [45, 28, -40, 25, -16, 10, -12, 50, 24, -24],
    backgroundColor: ["rgba(255, 99, 132, 0.6)", "rgba(255, 159, 64, 0.6)", "rgba(255, 205, 86, 0.6)", "rgba(75, 192, 192, 0.6)", "rgba(54, 162, 235, 0.6)", "rgba(153, 102, 255, 0.6)", "rgba(201, 203, 207, 0.6)", "rgba(155, 99, 132, 0.6)","rgba(255, 99, 32, 0.6)"],
    borderColor: "transparent",
    xAxisID: "x-axis-1",
}]

Check my fiddle: https://jsfiddle.net/beaver71/2hp160zh/

// Chart Options
var chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    responsiveAnimationDuration:500,
    hoverMode: 'label',
    stacked: false,
    legend: {display:false,},
    title:{
        display:false,
        text:"Chart.js Bar Chart - Multi Axis"
    },
    scales: {
       xAxes: [{
            type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
            display: true,
            position: "bottom",
            id: "x-axis-1",
            gridLines: {
                color: "#f3f3f3",
                drawTicks: true,
            },
            scaleLabel: {
                display: true,
            }
        }, {
            type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
            display: false,
            position: "bottom",
            id: "x-axis-2",
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            display: true,
            type: 'category',
            gridLines: {
                color: "#f3f3f3",
                drawTicks: true,
            },
            scaleLabel: {
                display: false,
            }
        }]
    }
};

// Chart Data
var chartData = {
    labels: ["Ações", "Opções", "Termo", "BM&F", "Garantias","Tesouro Direto","Financeiro","BTC","Renda Fixa","Clubes e fundos"],
    datasets: [{
        label: "my set",
        data: [45, 28, -40, 25, -16, 10, -12, 50, 24, -24],
        backgroundColor: ["rgba(255, 99, 132, 0.6)", "rgba(255, 159, 64, 0.6)", "rgba(255, 205, 86, 0.6)", "rgba(75, 192, 192, 0.6)", "rgba(54, 162, 235, 0.6)", "rgba(153, 102, 255, 0.6)", "rgba(201, 203, 207, 0.6)", "rgba(155, 99, 132, 0.6)","rgba(255, 99, 32, 0.6)"],
        borderColor: "transparent",
        xAxisID: "x-axis-1",
    }]
};

var config = {
    type: 'horizontalBar',

    options : chartOptions,
    data : chartData
};

var lineChart = new Chart('myChart', config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="600"></canvas>

Leave a comment