Add way to override colors

MichaelCastelbuono commented 5 years ago

Thanks for the great directive! I tried using the @input colors to override the colors but it didn't work. I dug into your code a bit and found that this line of code https://github.com/93Alliance/ng-chartjs/blob/master/projects/ng-chartjs/src/lib/ng-chartjs.directive.ts#L244 will never be try because it should be an object instead of an array.

If you change it to:

if (this.colors) {
    Object.assign(newElm, this.colors);
}

It will allow users to override, however I'm not sure if your code depends on the index variable or not, but from my understanding it isn't necessary.

Would also be able to expose your colors.ts file so we can take advantage of those nice functions too?

93Alliance commented 5 years ago

Thank you for your issue, I've tested that the color property is valid and it works.I suspect your code is incorrect.

Here's an example.

ts file:

// datasets
const datasets = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
    { data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C' }
];

// colors
const colors = [
    { // red
      backgroundColor: 'rgba(255,0,0,0.2)',
      borderColor: 'rgba(255,0,0,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
    { // green
      backgroundColor: 'rgba(0,255,0,0.2)',
      borderColor: 'rgba(0,255,0,1)',
      pointBackgroundColor: 'rgba(77,83,96,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(77,83,96,1)'
    },
    { // blue
      backgroundColor: 'rgba(0,0,255,0.2)',
      borderColor: 'rgba(0,0,255,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    }
  ];
// labels
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

html file:

<canvas  ngChartjs [datasets]="datasets" [labels]="labels"
     [colors]="colors" [legend]="false"
    [chartType]="'line"></canvas>

93Alliance commented 5 years ago

You can also refer to this demo， https://github.com/93Alliance/ng-chartjs/blob/master/src/app/line-chart/line-chart.component.ts

MichaelCastelbuono commented 5 years ago

@93Alliance thanks for the quick feedback. I'm using a pie chart and the example code only produced grey colors for each dataset. However, when I changed the colors into this shape it worked:

[
  {
    "backgroundColor": [
      "rgba(63,81,181,0.6)",
      "rgba(233,30,99,0.6)",
      "rgba(156,39,176,0.6)",
      "rgba(0,188,212,0.6)",
      "rgba(3,169,244,0.6)",
      "rgba(0,150,136,0.6)",
      "rgba(255,152,0,0.6)",
      "rgba(96,125,139,0.6)",
      "rgba(255,193,7,0.6)",
      "rgba(37,155,36,0.6)",
      "rgba(205,220,57,0.6)",
      "rgba(86,119,252,0.6)"
    ],
    "borderColor": [
      "#fff",
      "#fff",
      "#fff",
      "#fff",
      "#fff",
      "#fff",
      "#fff",
      "#fff",
      "#fff",
      "#fff",
      "#fff",
      "#fff"
    ],
    "pointBackgroundColor": [
      "rgba(63,81,181,1)",
      "rgba(233,30,99,1)",
      "rgba(156,39,176,1)",
      "rgba(0,188,212,1)",
      "rgba(3,169,244,1)",
      "rgba(0,150,136,1)",
      "rgba(255,152,0,1)",
      "rgba(96,125,139,1)",
      "rgba(255,193,7,1)",
      "rgba(37,155,36,1)",
      "rgba(205,220,57,1)",
      "rgba(86,119,252,1)"
    ],
    "pointBorderColor": [
      "#fff",
      "#fff",
      "#fff",
      "#fff",
      "#fff",
      "#fff",
      "#fff",
      "#fff",
      "#fff",
      "#fff",
      "#fff",
      "#fff"
    ],
    "pointHoverBackgroundColor": [
      "rgba(63,81,181,1)",
      "rgba(233,30,99,1)",
      "rgba(156,39,176,1)",
      "rgba(0,188,212,1)",
      "rgba(3,169,244,1)",
      "rgba(0,150,136,1)",
      "rgba(255,152,0,1)",
      "rgba(96,125,139,1)",
      "rgba(255,193,7,1)",
      "rgba(37,155,36,1)",
      "rgba(205,220,57,1)",
      "rgba(86,119,252,1)"
    ],
    "pointHoverBorderColor": [
      "rgba(63,81,181,1)",
      "rgba(233,30,99,1)",
      "rgba(156,39,176,1)",
      "rgba(0,188,212,1)",
      "rgba(3,169,244,1)",
      "rgba(0,150,136,1)",
      "rgba(255,152,0,1)",
      "rgba(96,125,139,1)",
      "rgba(255,193,7,1)",
      "rgba(37,155,36,1)",
      "rgba(205,220,57,1)",
      "rgba(86,119,252,1)"
    ]
  }
]

Any thoughts?

93Alliance commented 5 years ago

Yes, it works because the backgroundColor property can be a string[].

export interface Color {
    backgroundColor?: string | string[];
    borderWidth?: number | number[];
    borderColor?: string | string[];
    borderCapStyle?: string;
    borderDash?: number[];
    borderDashOffset?: number;
    borderJoinStyle?: string;

    pointBorderColor?: string | string[];
    pointBackgroundColor?: string | string[];
    pointBorderWidth?: number | number[];

    pointRadius?: number | number[];
    pointHoverRadius?: number | number[];
    pointHitRadius?: number | number[];

    pointHoverBackgroundColor?: string | string[];
    pointHoverBorderColor?: string | string[];
    pointHoverBorderWidth?: number | number[];
    pointStyle?: string | string[];

    hoverBackgroundColor?: string | string[];
    hoverBorderColor?: string | string[];
    hoverBorderWidth?: number;
}

93Alliance commented 5 years ago

Thanks for your suggestion. I have exposed the color.ts file. You need update 0.0.9.

93Alliance / ng-chartjs

Add way to override colors #3