How to customize a column chart in html

Question

Currently i am using chart.js but not able to make chart like following

in which the bar is on the dotted line.

I used like this JSFIDDLE

Please suggest me some resource so that i can produce the exact copy

Following is the javascipt i am using

<canvas id="myChart" width="100" height="100" padding-right="20px"></canvas> 
     <script>
      var data = {
        labels: ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(51,190,139,1)",
                strokeColor: "rgba(51,190,139,1)",
                highlightFill: "rgba(51,190,139,1)",
                highlightStroke: "rgba(51,190,139,1)",
                data:[1000,1250,750,1160,500,1500,850],
            }
        ]
      };

      var ctx = document.getElementById("myChart").getContext("2d");
      var myBarChart = new Chart(ctx).Bar(data,{
         responsive: true,
        barValueSpacing : 10,

      });

    </script>

Answer 1

Codepen http://codepen.io/noobskie/pen/vNpgGe?editors=101

Are you looking for something like this?

function(label){return ' €' + label.value.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ",");}

This is the function you need to use to change the label and then just tweak barValueSpacing: 40, to whatever you need

EDIT

Updated codepen so now you can also mess around with the amount of labels you have on the y-axis via

scaleOverride : true,
scaleSteps : 10,
scaleStepWidth : 150,
scaleStartValue : 0,