title: What is the easiest way to create a histogram (with target line) in Chart.js?
body: <p>I have a matplotlib code that seems to do what I want it to do. I am trying to use it in a django web app.</p>
  <p>For example:</p>
  <pre class="lang-py prettyprint-override"><code>home_totals_dict\[a\] = \[ 140, 130, 120, ...\]
  a = team_name
  
  plt.figure()
  plt.hist(x=home_totals_dict\[a\], bins='auto', color='#0504aa',alpha=0.7, rwidth=0.5)
  plt.hist(x=away_totals_dict\[b\], bins='auto', color='#d62728',alpha=0.7, rwidth=0.5)
  
  plt.axvline(x = c, color = &quot;k&quot;,linestyle = &quot;--&quot; )
  
  plt.xlabel(a + &quot;/ &quot;+ b)
  </code></pre>
  <p>The result is the image attached.</p>
  <p><img src="https://i.stack.imgur.com/BtIX0.png" alt="Result" /></p>
  <p>Every time I try do something similar in chart.js the x axis gets all messed up and am having trouble normalizing the x-axis prior to adding the data to chart.js</p>