You must be logged in to post your query.
Home › Forums › Report Bugs › Line thickness drawing issue with discontinuities
Tagged: line thickness discontinuities
I have noticed that the line chart doesn’t draw the lines with consistent thickness when there are discontinuities in the graph. It looks like some part are re-drawn, or drawn thicker than requested.
A simple way of reproducing the issue, with the realtime example:
https://canvasjs.com/editor/?id=https://canvasjs.com/example/gallery/dynamic/realtime_line/
Change the y value assigned so that there are discontinuities once in a while:
y: ((xVal%100)<5) ? “” :yVal
And set a very narrow line thickness, so that the issue is more noticeable. I actually noticed it with lineThickness = 1, but for the sake of reproducing the error, let’s assign something really small, like 0.01.
lineThickness: 0.01,
The graph should be barely visible, but it is more visible (thicker line) in some parts than in others.
The full html (copy-pasted from the modified example) would be:
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> window.onload = function () { var dps = []; // dataPoints var chart = new CanvasJS.Chart("chartContainer",{ title :{ text: "Live Random Data" }, data: [{ type: "line", lineThickness: 0.01, dataPoints: dps }] }); var xVal = 0; var yVal = 100; var updateInterval = 20; var dataLength = 500; // number of dataPoints visible at any point var updateChart = function (count) { count = count || 1; // count is number of times loop runs to generate random dataPoints. for (var j = 0; j < count; j++) { yVal = yVal + Math.round(5 + Math.random() *(-5-5)); dps.push({ x: xVal, y: ((xVal%100)<5) ? "" :yVal }); xVal++; }; if (dps.length > dataLength) { dps.shift(); } chart.render(); }; // generates first set of dataPoints updateChart(dataLength); // update chart after specified time. setInterval(function(){updateChart()}, updateInterval); } </script> <script type="text/javascript" src="/assets/script/canvasjs.min.js"></script> </head> <body> <div id="chartContainer" style="height: 300px; width:100%;"> </div> </body> </html>
PS. Congratulations on the library. It is very simple, lightweight, and powerful at the same time.
You must be logged in to reply to this topic. Login/Register