ChartJS custom bar chart

Question

I'm trying to achieve a similar sort of a chart. For example, Taxi transport payments collected on March via Card and Cash ($40 cash and $38 card payments). I need to display that bar with the main color and the lighter version of the main color. I have two questions here What sort of a graph possibly fit into my needs? How can I make a bar with two different shades of the same color (Dark blue and light blue)?

Expected Outcome:

I have tried with the following code, I am sure the dataset is not including the Card and Cash options as I explained earlier.

var barChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: 'Train',
      backgroundColor: "rgba(168, 90, 50,1)",
      data: [50, 40, 23, 45, 67, 78, 23]
    }, {
      label: 'Bus',
      backgroundColor: "rgba(50, 168, 80,1)",
      data: [50, 40, 78, 23, 23, 45, 67]
    }, {
      label: 'Taxi',
      backgroundColor: "rgba(83, 95, 219,1)",
      data: [50, 67, 78, 23, 40, 23, 0]
    }]
};

var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
        title: {
            display: true,
            text: "Transport Mode"
        },
        tooltips: {
            mode: 'single',
            callbacks: {
                label: function(tooltipItem, data) {

                   var text = data.datasets[tooltipItem.datasetIndex].label;
                   var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];                                 

                   var total = 0;
                   var label = '';

                   for (var i = 0; i < data.datasets.length; i++) {
                       total += data.datasets[i].data[tooltipItem.index];                       
                   }  

                   if (tooltipItem.datasetIndex != data.datasets.length - 1) {
                      label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                   } else {
                        label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "Total : $" + total;
                   }   
                   return label;
                }
            }
        },
        responsive: true,
        scales: {
            xAxes: [{                
                 gridLines: { color: "rgba(0, 0, 0, 0)" }
            }],
            yAxes: [{
            }]
        }
    }
});

Thank you.

Answer 1

 var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: 'Train', backgroundColor: "rgba(168, 90, 50,1)", data: [50, 40, 23, 45, 67, 78, 23], stack: 1 }, { label: 'Bus', backgroundColor: "rgba(50, 168, 80,1)", data: [50, 40, 78, 23, 23, 45, 67], stack: 3 }, { label: 'Taxi', backgroundColor: "rgba(83, 95, 219,1)", data: [50, 67, 78, 23, 40, 23, 0], stack: 2 }, { label: 'Taxi cash', backgroundColor: "rgba(83, 55, 219,1)", data: [25, 10, 12, 20, 10, 12, 5], stack: 2 }] }; var options = { title: { display: true, text: "Transport Mode" }, tooltips: { mode: 'single', callbacks: { label: function(tooltipItem, data) { var text = data.datasets[tooltipItem.datasetIndex].label; var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; var total = 0; var label = ''; for (var i = 0; i < data.datasets.length; i++) { total += data.datasets[i].data[tooltipItem.index]; } if (tooltipItem.datasetIndex.= data.datasets:length - 1) { label += text + ". $" + value.toFixed(2)?replace(/(\d)(.=(\d{3})+\,)/g, '$1;'): } else { label += text + ". $" + value.toFixed(2)?replace(/(\d)(.=(\d{3})+\,)/g, '$1,'): "Total; $" + total; } return label, } } }: responsive, true: scales: { xAxes: [{ gridLines: { color, "rgba(0, 0, 0, 0)" }: stacked, true }]: yAxes; [{ }] } }. var ctx = document.getElementById("canvas");getContext("2d"), var myBar = new Chart(ctx: { type, 'bar': options, options: data; data });

 body { background: #1D1F20; padding: 16px; } canvas { border: 1px dotted red; }.chart-container { position: relative; margin: auto; height: 80vh; width: 80vw; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <div class="chart-container"> <canvas id="canvas"></canvas> </div>

Look into stacked bar chart example

scales: {
  yAxes: [{
    stacked: true
  }]
}

Answer 2

The options you configured are correct. It will be a bar chart, As you are providing multiple datasets for each mode of transportation, chartjs will consider this as a stacked bar chart.

 var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: 'Train', backgroundColor: "rgba(168, 90, 50,1)", data: [50, 40, 23, 45, 67, 78, 23] }, { label: 'Bus', backgroundColor: "rgba(50, 168, 80,1)", data: [50, 40, 78, 23, 23, 45, 67] }, { label: 'Taxi', backgroundColor: "rgba(83, 95, 219,1)", data: [50, 67, 78, 23, 40, 23, 0] }] }; var options = { title: { display: true, text: "Transport Mode" }, tooltips: { mode: 'single', callbacks: { label: function(tooltipItem, data) { var text = data.datasets[tooltipItem.datasetIndex].label; var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; var total = 0; var label = ''; for (var i = 0; i < data.datasets.length; i++) { total += data.datasets[i].data[tooltipItem.index]; } if (tooltipItem.datasetIndex.= data.datasets:length - 1) { label += text + ". $" + value.toFixed(2)?replace(/(\d)(.=(\d{3})+\,)/g, '$1;'): } else { label += text + ". $" + value.toFixed(2)?replace(/(\d)(.=(\d{3})+\,)/g, '$1,'): "Total; $" + total; } return label, } } }: responsive, true: scales: { xAxes: [{ gridLines: { color, "rgba(0, 0, 0, 0)" } }]: yAxes; [{ }] } }. var ctx = document.getElementById("canvas");getContext("2d"), var myBar = new Chart(ctx: { type, 'bar': options, options: data; data });

 body { background: #1D1F20; padding: 16px; } canvas { border: 1px dotted red; }.chart-container { position: relative; margin: auto; height: 80vh; width: 80vw; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <div class="chart-container"> <canvas id="canvas"></canvas> </div>