nagix / chartjs-plugin-colorschemes

Predefined color schemes for Chart.js
MIT License
263 stars 58 forks source link

override donsn't work as expected with type 'scatter' #19

Open eloyvallinaes opened 4 years ago

eloyvallinaes commented 4 years ago

Setting specific colors for some traces in Chart of type 'scatter' doesn't prevent them for catching colors from the scheme. More exactly, even though the legend does show what would be expected, the markers on the canvas retain the colors supplied by the colorscheme.

MWE

        var myChart = new Chart(ctx, {
        type: 'scatter',
        data: {
          datasets: [
            {
             data : [
               {"x" : 10, "y" : 10},
               {"x" : 20, "y" : 20}
           ],
             backgroundColor : "gray",
             label : "Set 1"
           },
            {
              data : [
                {"x" : 10, "y" : 20},
                {"x" : 20, "y" : 40}
            ],
            label : "Set 2"
            }
          ]
          },
        options : {
          plugins : {
            colorschemes: {
              scheme: 'tableau.ColorBlind10',
              override : false,
              fillAlpha : 0.2
            }
          }
        }
      });

Output

image

cvijanovicn commented 3 years ago

any feedback on this? I have the same problem

eloyvallinaes commented 3 years ago

A workaround is to set up these four dataset properties:

dataset : {
backgroundColor : "lightgray",
pointBackgroundColor : "lightgray",
borderColor : "white",
pointBorderColor : "white",
}

the BackgroundColor and BorderColor will set what's displayed on the legend, while pointBackgroundColor and pointBorderColor will set what you see on the plot. Hope that helps!

cvijanovicn commented 3 years ago

thanks,

what also helped me as a workaround is manually disabling plugin for specific chart:

options.plugins: { colorschemes: false }