Chartjs-Chart js horizontal bars don't line up with the labels

0👍

I think you could use 1 dataset instead of 1 for each label.
See snippet below if it was you are expecting.

    // config 
    const config = {
        type: 'bar',
        data: {
            datasets: [{
                barPercentage: 0.8,
                categoryPercentage: 1,
                data: [{
                    y: 'Test1',
                    x: ['2022-09-29T16:00:00', '2022-09-29T16:05:02']
                }, {
                    y: 'Test1',
                    x: ['2022-09-29T16:06:00', '2022-09-29T16:10:10']
                }, {
                    y: 'Test2',
                    x: ['2022-09-29T16:10:00', '2022-09-29T16:15:02']
                }, {
                    y: 'Test2',
                    x: ['2022-09-29T16:17:00', '2022-09-29T16:20:10']
                }, {
                    y: 'Test3',
                    x: ['2022-09-29T16:20:00', '2022-09-29T16:25:02']
                }, {
                    y: 'Test3',
                    x: ['2022-09-29T16:26:00', '2022-09-29T17:30:10']
                }, {
                    y: 'Test4',
                    x: ['2022-09-29T16:30:00', '2022-09-29T16:35:02']
                }, {
                    y: 'Test4',
                    x: ['2022-09-29T16:37:00', '2022-09-29T16:40:10']
                }]
            }],
        },
        options: {
            animation: false,
            indexAxis: 'y',
            scales: {
                x: {
                    type: 'time',
                    stacked: true,
                    time: {
                        unit: 'minute'
                    },
                    min: new Date('2022-09-29T16:00:00'),
                    max: new Date('2022-09-29T16:45:00'),
                    ticks: {
                        stepSize: 1,
                        minRotation: 90,
                        maxRotation: 90
                    },
                    beginAtZero: true
                },
                y: {
                  type: 'category'
                }
            },
            plugins: {
                legend: {
                    display: false,
                },
                tooltip: {
                    yAlign: 'bottom',
                    callbacks: {
                        label: (context) => {
                            return context.dataset.data[context.dataIndex].x;
                        }
                    }
                }
            }
        }
    };

    // render init block
    const myChart = new Chart(
      document.getElementById('log_chart'),
      config
    );

    * {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
    }

    .chartMenu {
        width: 100vw;
        height: 40px;
        background: #1A1A1A;
        color: rgba(54, 162, 235, 1);
      }

      .chartMenu p {
        padding: 10px;
        font-size: 20px;
      }

      .chartCard {
        width: 100vw;
        height: calc(100vh - 40px);
        background: rgba(54, 162, 235, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .chartBox {
        width: 700px;
        padding: 20px;
        border-radius: 20px;
        border: solid 3px rgba(54, 162, 235, 1);
        background: white;
      }

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="container">
    <div class="col-12 mt-3 mb-3">
      <canvas id="log_chart" width="600" height="200"></canvas>
    </div>
</div>

Chartjs-How to improve PDF rasterization quality in PhantomJS?

0👍

Thanks to user2057925, I was able to make it work. Here’s the complete code.

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<style>
    * {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
    }

    .chartMenu {
        width: 100vw;
        height: 40px;
        background: #1A1A1A;
        color: rgba(54, 162, 235, 1);
      }

      .chartMenu p {
        padding: 10px;
        font-size: 20px;
      }

      .chartCard {
        width: 100vw;
        height: calc(100vh - 40px);
        background: rgba(54, 162, 235, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .chartBox {
        width: 700px;
        padding: 20px;
        border-radius: 20px;
        border: solid 3px rgba(54, 162, 235, 1);
        background: white;
      }
</style>

<div class="container">
    <div class="col-12 mt-3 mb-3">
      <canvas id="log_chart" width="600" height="200"></canvas>
    </div>
</div>

<script>
    const colors = {
      'Test1\nline2': 'rgba(64, 224, 208, 255)',
      'Test2\nline2': 'rgba(100, 149, 237, 255)',
      'Test3\nline2': 'rgba(143, 188, 139, 255)'
    };
    const getColor = function(context) {
      const {chart, datasetIndex, dataIndex} = context;
      const dataset =  chart.data.datasets[datasetIndex];
      const data = dataset.data[dataIndex];
      return colors[data.y];
    }

    // config 
    const config = {
        type: 'bar',
        data: {
            datasets: [{
                backgroundColor: getColor,
                borderColor: getColor,
                barPercentage: 0.8,
                categoryPercentage: 1,
                data: [{
                    y: 'Test1\nline2',
                    x: ['2022-09-29T16:00:00', '2022-09-29T16:06:02'],
                    tooltip: 'Tooltip1'
                }, {
                    y: 'Test1\nline2',
                    x: ['2022-09-29T16:18:00', '2022-09-29T16:25:10'],
                    tooltip: 'Tooltip2'
                }, {
                    y: 'Test1\nline2',
                    x: ['2022-09-29T16:31:00', '2022-09-29T16:50:02'],
                    tooltip: 'Tooltip3'
                },{
                    y: 'Test2\nline2',
                    x: [ '2022-09-29T16:03:03', '2022-09-29T16:13:06' ],
                    tooltip: 'Tooltip4'
                }, {
                    y: 'Test2\nline2',
                    x: [ '2022-09-29T16:16:03', '2022-09-29T16:19:06' ],
                    tooltip: 'Tooltip5'
                }, {
                    y: 'Test2\nline2',
                    x: [ '2022-09-29T16:20:37', '2022-09-29T16:30:40' ],
                    tooltip: 'Tooltip8'
                },{
                    y: 'Test2\nline2',
                    x: [ '2022-09-29T16:35:51', '2022-09-29T16:48:54' ],
                    tooltip: 'Tooltip6'
                }, {
                    y: 'Test2\nline2',
                    x: [ '2022-09-29T16:49:51', '2022-09-29T16:58:54' ],
                    tooltip: 'Tooltip7'
                }, {
                    y: 'Test3\nline2',
                    x: ['2022-09-29T16:00:00', '2022-09-29T16:05:02'],
                    tooltip: 'Tooltip9'
                }, {
                    y: 'Test3\nline2',
                    x: ['2022-09-29T16:12:00', '2022-09-29T16:30:10'],
                    tooltip: 'Tooltip10'
                }, {
                    y: 'Test3\nline2',
                    x: ['2022-09-29T16:40:00', '2022-09-29T16:55:48'],
                    tooltip: 'Tooltip11'
                }]
            }]
        },
        options: {
            animation: false,
            indexAxis: 'y',
            scales: {
                x: {
                    type: 'time',
                    stacked: true,
                    time: {
                        unit: 'minute'
                    },
                    min: new Date('2022-09-29T16:00:00'),
                    max: new Date('2022-09-29T16:55:48'),
                    ticks: {
                        padding: 70,
                        stepSize: 1,
                        minRotation: -90,
                        maxRotation: -90
                    },
                    beginAtZero: true
                },
                y: {
                    ticks: {
                        callback: function(value, index, labels) {
                            return this.getLabelForValue(value).split('\n');
                        }
                    }
                }
            },
            plugins: {
                   legend: {
                    display: false,
                },
                tooltip: {
                    yAlign: 'bottom',
                    callbacks: {
                        label: (context) => {
                            return context.dataset.data[context.dataIndex].tooltip;
                        }
                    }
                }
            }
        }
    };

    // render init block
    const myChart = new Chart(
      document.getElementById('log_chart'),
      config
    );
</script>

Chartjs-Change Chartjs financial chart yaxis from left to right

Source:stackexchange.com

Leave a comment Cancel reply