1

I'm using the Chart.js library to create a line graph and due to the high number of labels needed I've skipped some using the method in the Limit labels number on Chartjs line chart question, also see below.

My chart looks exactly how I want it to with one exception: enter image description here There is a random black line appearing where the second label would normal be.

This is the code I've used to create this chart:

Chart.defaults.global.elements.point.radius = 2;

var ctx = document.getElementById("graph-1-met");

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [0,'','','','','',1,'','','','','',2,'','','','','',3,'','','','','',4,'','','','','',5,'','','','','',6,'','','','','',7,'','','','','',8,'','','','','',9,'','','','','',10,'','','','','',11,'','','','','',12,'','','','','',13,'','','','','',14,'','','','','',15,'','','','',''],
        datasets: [
            {
                data: [65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55],
                backgroundColor: "rgba(0,204,255,0.2)",
                borderColor: "rgba(0,204,255,1)",
                borderWidth: 2
            }
        ]
    },
    options: {
        legend: {
            display: false
        },
        scales: {
            xAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Blowing Time (min)'
                }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero:true
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Undissolved Lime (tonnes)'
                }
            }]
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="graph-1-met"></canvas>

I'd like to note a few things:

  • If I use an actual label (e.g. [0,1,2,3,4,...]) the black line does not appear. Which leads me to believe something is going wrong with my use of empty strings ('').

  • When I change the label to: [0,1,'','',...] the black line now appears on the first occurrence of ''. In this case the 3rd label position.

  • In an attempt to fix the problem I tried setting the colour of the gridlines to white and this caused black line to no longer appeared. Unfortunately, this solution makes the graph look substantially worse.

Question: Why is this black line appearing and is there a way to remove it?

Community
  • 1
  • 1
Paul Warnick
  • 903
  • 2
  • 13
  • 26
  • When you inspect the line (with dev tools) does it give any indication what's causing it? A class name, `data-*`, id, etc.? – adam-beck Aug 25 '16 at 02:11
  • @adam-beck, it's a canvas element – Mi-Creativity Aug 25 '16 at 03:28
  • @adam-beck As Mi-Creativity said, the entire element is a canvas. Unfortunately, the Chart.js library builds the entire graph within the single element, so inspecting doesn't help much. – Paul Warnick Aug 25 '16 at 16:10

1 Answers1

1

Ok, this might be weird, but I just removed every '' from the labels array and it renders like it should.

jsFiddle

Chart.defaults.global.elements.point.radius = 2;

var ctx = document.getElementById("graph-1-met");

var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [0, , , , , 1, , , , , , 2, , , , , , 3, , , , , , 4, , , , , , 5, , , , , , 6, , , , , , 7, , , , , , 8, , , , , , 9, , , , , , 10, , , , , , 11, , , , , , 12, , , , , , 13, , , , , , 14, , , , , , 15, , , , , ],
    datasets: [{
      data: [65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55],
      backgroundColor: "rgba(0,204,255,0.2)",
      borderColor: "rgba(0,204,255,1)",
      borderWidth: 2,
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Blowing Time (min)'
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        },
        scaleLabel: {
          display: true,
          labelString: 'Undissolved Lime (tonnes)'
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="graph-1-met"></canvas>
Mi-Creativity
  • 9,554
  • 10
  • 38
  • 47