Horizontal floating bar chart vertical scroll to adjust x axis data

Viewed 18

So I currently have a floating horizontal bar chart but i'd like to make a few updates to it and not sure based on documentation how. I'd like to make the x-axes "sticky" so that when the chart loads, the user sees some data along with the x-axis labels (they can see the numbers associated to the chart) this is because the div that wraps it will be scrollable in the Y direction along side a lot of information so they won't be able to see the x-axis labels when it loads without scrolling to the bottom. Additionally, is there a way to make it that when the user scrolls, the x-axis labels will adjust to fit all the data being presented within it?

new Vue({
  el: "#app",
  data: {
      chart: null,
  },
  computed: {
    options() {
      return {
        indexAxis: 'y',
        responsive: true,
        elements: {
          bar: {
            borderWidth: 0,
          },
        },
        legend: {
          display: false,
        },
        plugins: {
          legend: {
            display: false,
          },
          title: {
            display: false,
          },
        },
        scales: {
          xAxes: {
            min: 100,
            max: 10000,
          },
          yAxes: {
            grid: {
              display: false,
            },
          },
        },
      };
    },
  },
  mounted() {
    const data = {
      labels: ["a", "b", "c", "c", "c", "c", "c", "c", "c", "c", "c", "c"],
      datasets: [
        {
          axis: 'y',
          label: 'Min and Max',
          data: [[100,300], [400,3000], [3000,5000],[3000,5000],[3000,5000],[3000,5000],[3000,5000],[3000,5000],[3000,5000],[3000,5000],[3000,7000],[8000,10000] ],
          borderRadius: 80,
          borderSkipped: false,
          barThickness: 10,
          backgroundColor: ['rgb(130, 188, 0)', 'rgb(146, 146, 146)'],
          barPercentage: 0.3,
          minBarLength: 20,
        },
      ],};
    const ctx = document.getElementById('myChart').getContext('2d');
    this.chart = new Chart(ctx, {
      type: "bar",
      data,
      options: this.options,
    });
    this.chart.update();
  },
})

floating horizontal bar chart jsfiddle

0 Answers
Related