CODEWITHSUNDEEP
javascriptchart.js
Tijl Van den Brugghen
Tijl Van den Brugghen

Reputation: 141

Showing only entire units on ChartJS

i was making a chart today - to test it out - and I was thinking if it is possible to show only entire units on the side of the chart ? (Like 1 2 3 4 5 6 7 8 9, and so on...) I'm using ChartJS

Here's a screen : enter image description here

(The units are at the left, near the "Value")

PS: excuse my bad English, I'm french.

Upvotes: 0

Views: 208

Answers (2)

potatopeelings
potatopeelings

Reputation: 41065

You can pass in options to override the scale like so

...
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 1,
scaleStartValue: 0,
...

Fiddle - http://jsfiddle.net/3kvb8ycy/

If you don't know the upper limit of your data, then you can either calculate the above before you initialize the chart and set it (boring :-)) or do something where you format the scale label not to show the scale label when you don't have a whole number

new Chart(ctx).Line(data, {
  integersOnly: true,
  scaleLabel: function(d) {
    if (parseInt(d.value) === Number(d.value))
      return d.value
    else
      return '';
  }
});

Which covers pretty much most cases, except for when all your values are below 1 and none of them are close to one - in this case you don't see any scale labels.

Now you could simply put in an extra value at the end your data array (i.e. without a corresponding label and that would force the scale to go up to 1), but that would pull up the line after the last line (a bit). This is how that looks like

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [0.65, 0.2, 0.80, 0.81, 0.56, 0.55, 0.8, 1]
        }
    ]
};

Fiddle - http://jsfiddle.net/wufLjajg/

But we can do one better and just move this dummy point to a dummy series and fill the rest of the series with null (Chart.js does not plot null values, nor show it in tooltips)

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [0.65, 0.2, 0.80, 0.81, 0.56, 0.55, 0.8]
        },
        {
            data: [null, null, null, null, null, null, null, 1]
        }
    ]
};

and then you're gold (since the last point is off the chart you won't even see it's tooltip).

Fiddle - http://jsfiddle.net/kzaxtmdq/

Upvotes: 1

Joel R Michaliszen
Joel R Michaliszen

Reputation: 4222

i have this issue too , but when i looked the code of chartjs i could understand what happened, it's happend because the min and the max value in the dataset was between 1 only if dataset has some value bigger than 1 it will show just the integer part , see the snippet:

var lineChartData1 = {
    "datasets": [{
        "data": [
            "0.5",
            "0.2",
            "0.9",
            "0.4",
            "0.3",
            "0.2",
            "0.5",
            "0.7",
            "0.5",
            "1"],
            "pointStrokeColor": "#fff",
            "fillColor": "rgba(155,220,220,0.5)",
            "pointColor": "rgba(155,220,220,1)",
            "strokeColor": "rgba(155,220,220,1)"
    }],
        "labels": [
        "2013-01-01",
        "2013-01-04",
        "2013-01-15",
        "2013-02-03",
        "2013-03-25",
        "2013-04-03",
        "2013-04-14",
        "2013-05-27",
        "2013-05-27",
        "2013-08-03"]
};

var lineChartData2 = {
    "datasets": [{
        "data": [
            "0.5",
            "0.2",
            "3",
            "0.4",
            "0.3",
            "2.2",
            "2",
            "0.7",
            "0.5",
            "1"],
            "pointStrokeColor": "#fff",
            "fillColor": "rgba(155,100,220,0.5)",
            "pointColor": "rgba(155,100,220,1)",
            "strokeColor": "rgba(155,100,220,1)"
    }],
        "labels": [
        "2013-01-01",
        "2013-01-04",
        "2013-01-15",
        "2013-02-03",
        "2013-03-25",
        "2013-04-03",
        "2013-04-14",
        "2013-05-27",
        "2013-05-27",
        "2013-08-03"]
};


var myLine = new Chart(document.getElementById("canvas1").getContext("2d")).Line(lineChartData1);
var myLine2 = new Chart(document.getElementById("canvas2").getContext("2d")).Line(lineChartData2);
<script src="http://www.chartjs.org/assets/Chart.js"></script>

<body>
    <div>
      <h3>Only one Integer</h3>
      <canvas id="canvas1" height="200" width="400"></canvas>
    </div>
    <div>
      <h3>More then one Integer</h3>
      <canvas id="canvas2" height="200" width="400"></canvas>  
    </div>
</body>

I hope be useful.

Upvotes: 1

Related Questions