Line charts shows no data when all values are equal

[keyboardsamurai]

When you have a growing data set that only changes every couple of minutes and the first values are always identical, the line chart will not show anything until a value changes. For testing use this code:

data.datasets[0].data = [1,1,1]
var myNewChart = new Chart(ctx).Line(data,options);

[fluxsaas]

+1

it's also true for Bar/Radar charts.

[nnnick]

This is a bit of a tricky one - how would you expect this to render?

Basically Chart.js doesn't know whether your range of data should be 0 - 2 and your data should fit in the middle, or if your range should be 0-100 and your values are very low.

If you know your universe of data you could hard code your Y scales?

[fluxsaas]

i would expect that the line is exactly in the middle...

[fluxsaas]

that would be my solution:

  var min = _.max(chartData.datasets[0].data) 
  var max = _.min(chartData.datasets[0].data) 

  if (max == min) {
    var opt = {
      scaleOverride : true,
      scaleSteps : 3,
      scaleStepWidth : 1,
      scaleStartValue : max - 2
    }
    new Chart(ctx).Line(chartData, opt);
  }

that should always draw a line in the middle.

[nnnick]

Something like that would work, yeah. To make your solution a bit more robust, I'd suggest perhaps flooring your min value so you don't end up with scales that have awkward decimal places.

When it creates a dynamic scale it does a little bit of logic to ensure you get a nice even spread of scale values that cover your min and max values and makes sure the amount of steps fits nicely into the available canvas size.

The issue is there is no way of knowing for each instance what range we should apply. I could some logic to figure out if the range of values is 0, and then put in a range of double what the repeated value is? So for this test case use 2 as a range?

[SleeplessByte]

I just tried your workaround, and it does show a line, but always 1 scaleStep BELOW the actual value.

[bradmalloy]

I also just tried the workaround; as a complete neophyte, it took a little research to get working right (which should have been obvious)

Instead of:

var min = _.max(chartData.datasets[0].data)

I had to use:

var min = Math.max(chartData.datasets[0].data)

I know, silly, but others like me might read this and benefit from it.

[GabrielDelepine]

I can't make the workaround of @fluxsaas works, even with the @bradmalloy's addition. Maybe I'm doing something wrong.

Could someone explain me please ? I'd like to make it work and pull a request.

Thanks

[testerix1]

Hello friends, I would like to ask where should I paste this fix? In my website I use Charts.js + https://github.com/arifLogic/respChartJS

I'm not sure if it is correct, chartjs-option.js:
/*
Author : Arif Setyawan

This function must used together with ChartJS. Or it must 
load chartjs first before this menu to be work

*/

function respChart(selector, data, options){

// Define default option for line chart
var option = {
    scaleOverlay : false,
    scaleOverride : false,
    scaleSteps : null,
    scaleStepWidth : null,
    scaleStartValue : null,
    scaleLineColor : "rgba(0,0,0,.1)",
    scaleLineWidth : 1,
    scaleShowLabels : true,
    scaleLabel : "<%=value%>",
    scaleFontFamily : "'proxima-nova'",
    scaleFontSize : 10,
    scaleFontStyle : "normal",
    scaleFontColor : "#909090", 
    scaleShowGridLines : true,
    scaleGridLineColor : "rgba(0,0,0,.05)",
    scaleGridLineWidth : 1, 
    bezierCurve : true,
    pointDot : true,
    pointDotRadius : 3,
    pointDotStrokeWidth : 1,
    datasetStroke : true,
    datasetStrokeWidth : 2,
    datasetFill : true,
    animation : true,
    animationSteps : 60,
    animationEasing : "easeOutQuart",
    onAnimationComplete : null
}

// check if the option is override to exact options 
// (bar, pie and other)
if (options == false || options == null){
    options = option;
} 

// get selector by context
var ctx = selector.get(0).getContext("2d");
// pointing parent container to make chart js inherit its width
var container = $(selector).parent();

// enable resizing matter
$(window).resize( generateChart );

// this function produce the responsive Chart JS
function generateChart(){
    // make chart width fit with its container
    var ww = selector.attr('width', $(container).width() );
    // Initiate new chart or Redraw

    // YOUR FIX
    var min = Math.max(data.datasets[0].data) 
    var max = Math.min(data.datasets[0].data) 

    if (max == min) {
        options.scaleOverride : true;
        options.scaleSteps : 3;
        options.scaleStepWidth : 1;
        options.scaleStartValue : max - 2;
    }

    new Chart(ctx).Bar(data, options);
};

// run function - render chart at first load
generateChart();

}

Well, that solutions doesn't work for me. It seems to me that I pasted code in the wrong section. Let me know how to make it proper.

[testerix1]

Hey anyone can help me to fix it? I am not sure what is wrong and how to use your solution. :P Please answer my question.

[boyaq]

@fluxsaas Thanks man, this is great fix for me.

[vpllan]

Thanks for the fix!

Keep in mind this works only if you have one series (i.e. only datasets[0]).
Also, you might need to use the following instead:
var min = Math.min.apply(null, preparedData.datasets[0].data);
var max = Math.max.apply(null, preparedData.datasets[0].data);

[amydev]

Just got this fixed for my project and wanted to throw this out there in case anyone ran into it...

My dataset was [2, 2], but when I tried to use Math.min() and Math.max(), it gave me "not a number" because apparently those were strings (even though I used parseInt when I populated that array). I just added code to my "for" loop where I created the array to give me the min and max. Worked like a charm!

[abiral]

I used Charts.js + https://github.com/arifLogic/respChartJS
and come to know that for single data like data.datasets[0].data = [80] you need to have at least two label.
example:
var var_date = ["Start","End"];
var lineChartData = {
labels : var_date,
datasets : [
{
fillColor : "rgba(240,111,111,0)",
strokeColor : "rgba(240,111,111,0.5)",
pointColor : "rgba(229,78,78,1)",
pointStrokeColor : "#fff",
data : [80]
}
]
}
respChart($("#social-chart"),lineChartData);

[PabloVallejo]

@fluxsaas working for me too 👍

[fulldecent]

I am not able to reproduce this problem using the new version release candidate.

Could you please check if this has been fixed and close or create a JSBin showing the issue.

Thank you

[nnnick]

Behaviour in the latest version is to put in a difference of 1 if all the values are the same as suggested.

[SleeplessByte]

Jup. Hasn't changed since #76 (comment)

[bhaumik1199]

Hello,
If there is only one data then x axis value display top of the y axis with cutting the content of x axis . Any solution?

[hariky]

nnnick,
The latest library still doesn't render the data properly with only one dataitem. Please see the image. x-axis label not rendered properly.

[etimberg]

This is fixed in #898

[hariky]

Thanks, I have updated and its works fine.

On Thu, Jan 29, 2015 at 4:25 AM, Evert Timberg notifications@github.com
wrote:

This is fixed in #898 #898

—
Reply to this email directly or view it on GitHub
#76 (comment).