Radar chart values overlapping

[romulodp]

Hello,

I'm working in a project which has some charts. At this point, I'm kind of stuck in a issue with radar chart. I have two dataset arrays and when data values are printed, the values are overlapping and the information becomes hard to be read.

Do you know if it is a known issue or if there is a fix to that?

Thank you, Romulo Portillo

[markosko]

One solution are annotations but they working on point or they can work for both series at same times but for exact data of point u need to hover on point or second solution is move one series ingraphdata to inner side and second series data to outer part of data

Or if u want and u can send me config i can do example of that

First: https://github.com/FVANCOP/ChartNew.js/wiki/100_020_Annotations Second: https://github.com/FVANCOP/ChartNew.js/wiki/100_080_In_Graph_Data#ingraphdataalign-2 https://github.com/FVANCOP/ChartNew.js/wiki/100_080_In_Graph_Data#ingraphdatavalign-2

[romulodp]

I'm using annotation already. But the problem is the generated chart is exported to Excel file and the data values are overlapping.

[markosko]

so only second with moving ingraphdata by position/dataalign

[FVANCOP]

Hi,

Download the last version (some bugs have been found when looking for a solution).

In the sample, I have added "issue_400.html". This sample produces following chart :

Important code to produce it :

      function paddingRadiusFct(area,ctx,data,statData,posi,posj,othervars) {
        var offset=5;
        if(data.datasets[posi].data[posj] > data.datasets[(posi+1)%2].data[posj])return(offset);
        else if(data.datasets[posi].data[posj] ==data.datasets[(posi+1)%2].data[posj])return(offset-2*offset*posi);
        else return(-offset);
      };

      function alignFct(area,ctx,data,statData,posi,posj,othervars) {
        if(data.datasets[posi].data[posj] > data.datasets[(posi+1)%2].data[posj])return("off-center");
        else if(data.datasets[posi].data[posj] == data.datasets[(posi+1)%2].data[posj] && posi==0)return("off-center");
        else return("to-center");
      };

      var options = {
            animation : false,
            datasetFill : false,
            canvasBorders : true,
            canvasBordersWidth : 3,
            canvasBordersColor : "black",
            legend : true,
            inGraphDataShow : true,
            inGraphDataFontColor : ["red","blue"],
            inGraphDataPaddingRadius : paddingRadiusFct,
            inGraphDataAlign : alignFct
      };