'What is the easiest way to create a histogram (with target line) in Chart.js?

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.

For example:

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 = "k",linestyle = "--" )

plt.xlabel(a + "/ "+ b)

The result is the image attached.

Result

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



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source