0

Buen dia. Actualmente estoy intentando utilizar chart.js en angular 8. realice la instalacion utilizando los comandos:

npm install ng2-charts
npm install chart.js

Luego realice la importacion del modulo

import { ChartsModule } from 'ng2-charts';

y agregue a los import:

imports: [
BrowserModule,
RouterModule,
ChartsModule

],

con este codigo lo utilizo en bar-chart.component.html:

<div>
  <div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType">
    </canvas>
  </div>
</div>

y en el codigo bar-chart.component.ts

introducir la descripción de la imagen aquí

Al ejecutar el servidor tengo el siguiente error:

introducir la descripción de la imagen aquí

Soy nuevo utilizando angular y chart.js asi que no doy con el error.

1 respuesta 1

1

Fijate que el error esta haciendo referencia a esta funcion propia de los charts:

function getColors(chartType, index, count) {
    if (chartType === 'pie' || chartType === 'doughnut') {
        return formatPieColors(generateColors(count));
    }
    if (chartType === 'polarArea') {
        return formatPolarAreaColors(generateColors(count));
    }
    if (chartType === 'line' || chartType === 'radar') {
        return formatLineColor(generateColor(index));
    }
    if (chartType === 'bar' || chartType === 'horizontalBar') {
        return formatBarColor(generateColor(index));
    }
    if (chartType === 'bubble') {
        return formatPieColors(generateColors(count));
    }
    if (chartType === 'scatter') {
        return formatPieColors(generateColors(count));
    }
    throw new Error(`getColors - Unsupported chart type ${chartType}`);
}

A mi me paso y era que tenia mal escrito el type. Fijate de pasarle en el chartType del html directamente el bar para ver si te lo toma mejor.

Saludos!!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.