title: How to set X coordinate for each bar with react chart js 2?
body: <p>I want to make a chart with min and max vertical lines and bars between them. I can't find information how to set bars' X coordinate or make custom line plot with vertical 'bars' instead of points.
  And also I don't understand how to scale X axis, why MAX is left-side MIN? Min=22.5, Max=24.5
  <a href="https://i.stack.imgur.com/olHA8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/olHA8.png" alt="plot" /></a></p>
  <pre><code>let plot_options = {
      showScale: true,
      pointDot: true,
      showLines: true,
      maintainAspectRatio: false,
      annotation: {
          annotations: [
              {
                  type: 'line',
                  mode: 'vertical',
                  scaleID: 'y-axis-0',
                  value: min,
                  borderColor: 'red',
                  borderWidth: 2,
                  label: {
                      backgroundColor: 'red',
                      content: 'Min',
                      enabled: true,
                  },
              },
              {
                  type: 'line',
                  mode: 'vertical',
                  scaleID: 'y-axis-0',
                  value: max,
                  borderColor: 'red',
                  borderWidth: 2,
                  label: {
                      backgroundColor: 'red',
                      content: 'MAX',
                      enabled: true,
                  },
              },
          ]
      },
      title: {
          display: true,
          text: plotHeader,
      },
      responsive: true,
      legend: {
          display: false,
      },
      scales: {
          xAxes: [{
              scaleLabel: {
                  display: true,
                  labelString: labelx
              },
              ticks: {
                  min: min,
                  max: max
              }
          }],
          yAxes: [{
              scaleLabel: {
                  display: true,
                  labelString: labely
              },
              ticks: {
                  beginAtZero: true,
              },
          }]
      },
  }
  
  data = {
          barPercentage: 0.5,
          barThickness: 6,
          maxBarThickness: 8,
          minBarLength: 2,
          labels: labels,
          datasets: [{
                      data: values,
                      borderColor: BLUE,
                      backgroundColor: BLUE
                  }]
        }
  &lt;Bar options={plot_options}  data={data} plugins={ChartAnnotation}  /&gt;
  </code></pre>
  <p>That's what I expect:
  <a href="https://i.stack.imgur.com/6rLph.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6rLph.png" alt="plot2" /></a></p>