Angular 16 chart.js - Tutorial para crear graficas

[@jlonso1840]

God me apoye de la documentación y esta parte para poder solucionar un problema que tenía con jsPDF

[@judaleba]

tengo un problema con Angular 18:
al momento de de compilar con "ng build --configuration=production" y subirlo al cpanel no corre... a de ser por que no encuentra la libreria o la ruta y no se donde me falta referenciarlo

[@DiscoDurodeRoer]

Comentanos por discord y asi podemos ayudarte entre todos

[@judaleba]

@@DiscoDurodeRoer me bloquearon la cuenta de discord y no he podido recuperar la por que esta vinculada a otro número de celular :(

[@sebastiancollantes1458]

Funciona súper!, pero me gustaría saber si puedo quitar el título del gráfico de barras, ese que dice "My first dataset" estoy buscando la manera y no encuentro

[@hisoka-dddd1452]

Amigo buenos dias , disculpa pero yo estoy usando esta version del chart js , "chart.js": "^4.4.2", y no me detecta ese fill: false; a que se deberia si me puede absolver la duda.

[@DiscoDurodeRoer]

Debes estar usando otra version, comprueba en el fichero package.json dentro de chartjs de node_modules. En la documentacion oficial si tienen puesto el fill. www.chartjs.org/docs/latest/charts/line.html#dataset-properties

[@JesusSánchezArroyo-r5w]

Module '"ng2-charts"' has no exported member 'NgChartsModule'.

[@delirojas7635]

export 'Chart' (imported as 'Chart') was not found in '../dist/chart.js' (module has no exports)

[@DiscoDurodeRoer]

Lo has instalado?

[@RaúlMelgarejoTeran]

SE PODRA USAR CON ANGULAR 18?

[@DiscoDurodeRoer]

Si!

[@hisoka-dddd1452]

Viendo la documentacion del chartjs lo trabajan de esta forma.
const config = {
type: 'pie',
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Pie Chart'
}
}
},
};
const DATA_COUNT = 5;
const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};
const data = {
labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
datasets: [
{
label: 'Dataset 1',
data: Utils.numbers(NUMBER_CFG),
backgroundColor: Object.values(Utils.CHART_COLORS),
}
]
};
const actions = [
{
name: 'Randomize',
handler(chart) {
chart.data.datasets.forEach(dataset => {
dataset.data = Utils.numbers({count: chart.data.labels.length, min: 0, max: 100});
});
chart.update();
}
},
{
name: 'Add Dataset',
handler(chart) {
const data = chart.data;
const newDataset = {
label: 'Dataset ' + (data.datasets.length + 1),
backgroundColor: [],
data: [],
};
for (let i = 0; i < data.labels.length; i++) {
newDataset.data.push(Utils.numbers({count: 1, min: 0, max: 100}));
const colorIndex = i % Object.keys(Utils.CHART_COLORS).length;
newDataset.backgroundColor.push(Object.values(Utils.CHART_COLORS)[colorIndex]);
}
chart.data.datasets.push(newDataset);
chart.update();
}
},
{
name: 'Add Data',
handler(chart) {
const data = chart.data;
if (data.datasets.length > 0) {
data.labels.push('data #' + (data.labels.length + 1));
for (let index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(Utils.rand(0, 100));
}
chart.update();
}
}
},
{
name: 'Remove Dataset',
handler(chart) {
chart.data.datasets.pop();
chart.update();
}
},
{
name: 'Remove Data',
handler(chart) {
chart.data.labels.splice(-1, 1); // remove the label first
chart.data.datasets.forEach(dataset => {
dataset.data.pop();
});
chart.update();
}
}
];