26

I have made a chart with Chart JS, as you can see in my fiddle. There are three lines in this chart. I want to have the orange and yellow line to be thicker than it is right now. The green dotted line is good as it is.

I've searched around, and tried some things. But I haven't found the right solution yet. I hope that my question is clear, and that someone can help me with this.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js" charset="utf-8"></script>
<canvas id="canvas2"></canvas>

JavaScript

Chart.defaults.global.legend.display = false;
var lineChartData = {
labels: ['20°', '30°', '40°', '50°', '60°', '70°', '80°'],
datasets: [{
  data: [null, null, null, 400, 320, 220, 90],
  pointBorderColor: "rgba(75,192,192,1)",
  pointBackgroundColor: "#fff",
  borderColor: '#FFEC8B',
  pointBorderWidth: 0,
  pointHoverRadius: 0,
  pointHoverBackgroundColor: "rgba(75,192,192,1)",
  pointHoverBorderColor: "rgba(220,220,220,1)",
  pointHoverBorderWidth: 0,
  lineWidth: 100,
  pointRadius: 0,
  pointHitRadius: 0,
},{
  data: [550, 520, 470, 400, null, null, null],
  borderColor: '#ff8800',
  pointBorderWidth: 0,
  pointHoverRadius: 0,
  pointHoverBackgroundColor: "rgba(75,192,192,1)",
  pointHoverBorderColor: "rgba(220,220,220,1)",
  pointHoverBorderWidth: 0,
  pointRadius: 0,
  pointHitRadius: 0,
},
{
    data: [220, 220, 220, 220, 220, 220, 220],
    borderColor: '#008080',
    borderDash: [10, 10],
    pointBorderWidth: 0,
    pointHoverRadius: 0,
    pointHoverBackgroundColor: "rgba(75,192,192,1)",
    pointHoverBorderColor: "rgba(220,220,220,1)",
    pointHoverBorderWidth: 0,
    pointRadius: 0,
    pointHitRadius: 0,
  }
]
};

var ctx = document.getElementById("canvas2").getContext("2d");
var myChart = new Chart(ctx, {
 type: "line",
 beginAtZero: true,
 scaleOverride:true,
 scaleSteps:9,
 scaleStartValue:0,
 lineWidth: 100,
 scaleStepWidth:100,
 data: lineChartData,
 options: {
    elements: {
        line: {
            fill: false
        }
    },
    style: {
      strokewidth: 10
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Temperatuur - Celcius'
        }
      }],
      yAxes: [{
        display: true,
        ticks: {
            max: 600,
            min: 0,
            stepSize: 200,
            userCallback: function(value, index, values) {
                value = value.toString();
                value = value.split(/(?=(?:...)*$)/);
                value = value.join('.');
                return value + '%';
              }
        },
        scaleLabel: {
          display: true,
          labelString: 'Rendement'
        }
      }]
    }
  }
})

Tom Lord
  • 27,404
  • 4
  • 50
  • 77
Stijn Westerhof
  • 474
  • 1
  • 6
  • 16

2 Answers2

61

You were close to it !
Actually, the attribute you have to edit is not lineWidth but borderWidth (in the first example of Chart.js docs, you can see the attribute).

As stated in the example of the MDN doc of lineTo :

Use the beginPath() to begin a path to draw a line on, move the pen with moveTo() and use the stroke() method to actually draw the line.

The line is basically a rectangle with a width of 0. Then the width of the line is calculated using the rectangle border width.

So you simply have to edit your dataset this way : 
datasets: [{
    // ...
    borderWidth: 1 // and not lineWidth
    // ...
}]

I also have updated your fiddle with the edit, and you can see that it is working now.

tektiv
  • 14,010
  • 5
  • 61
  • 70
  • Oh man, thank you so much! Why do call it borderWidth, in my opinion it makes no sense? – Stijn Westerhof Jul 15 '16 at 12:58
  • @StijnWesterhof As I explained, lines in canvas (then also in Chart.js) are drawn as a rectangle with a width of 0. So the line width is linked to the "*rectangle*" border width. Then, by editing the border width, you also edit the line width. Chart.js devs could have edited this to have more sense .. Anyway, glad I helped ! :) – tektiv Jul 15 '16 at 13:01
  • The corners of the lines that I've increased are overlapping the chart now. It is not really a big problem, but do you know how to fix this, that it will go behind the chart borders? – Stijn Westerhof Jul 15 '16 at 13:41
  • @StijnWesterhof You now have the same problem as in [this other question on SO](http://stackoverflow.com/questions/38144776/chart-js-combined-line-and-bar-data). Unfortunately, I have no idea about what could fix the issue .. – tektiv Jul 15 '16 at 13:49
2

if this helps, or you still discern this method as presentable you can set the borderwidth relatively high like 50.

datasets:[{
    borderWidth: 50
}]
 //at your options put this
 options: {
            legend: {
                display: true,
                labels: {
                    fontSize: 16, //point style's size is based on font style not boxed width.
                    usePointStyle:true,
                }
            }

you check usePointStyle at the docs https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration

MarkDaDog
  • 21
  • 1