Excelente video Para los que tienen el error en el tipado simplemente en el type ChartOptions ponganle tipo any luego de el tipado que te da la libreria (ej: chart: ApexChart | any) y listo
Les añado la opción que yo implementé y es más fácil, además que no es necesario usar el time: en el html añades lo siguiente: en el ts yo creé una función ya que yo genero la información desde un AJAX: Generatechart(existencia){ var options = { theme: { mode: 'light', }, series: [ { name: 'Existencia', data: [existencia] } ], responsive: [{ breakpoint: undefined, options: {}, }], chart: { type: "bar", height: 500, selection: { enabled: false }, toolbar: { show: false, }, }, plotOptions: { bar: { horizontal: false, columnWidth: "55%", } }, dataLabels: { enabled: false }, stroke: { show: true, width: 2, colors: ["transparent"] }, xaxis: { categories: [ "Existencia", ] }, yaxis: { title: { text: "" } }, fill: { opacity: 1 }, tooltip: {}, } var chart = new ApexCharts( document.querySelector("#chart"), options ); chart.render(); } Yo le mando los datos a la función o pueden eliminar la variable existencia y poner los datos manual, saludos.
Hice exactamente lo mismo pero me da error en el html error TS2322: Type 'ApexAxisChartSeries | undefined' is not assignable to type 'ApexAxisChartSeries | ApexNonAxisChartSeries'. Type 'undefined' is not assignable to type 'ApexAxisChartSeries | ApexNonAxisChartSeries'.
a mi se me renderiza con width pequeño y si lo agrando sigue sin verse. que puede estar fallando? no lo hago en el app component, lo hago en otra pagina
Pueden ser dos cosas. O que te haya faltado algún ajustecito o algo del css, o que la versión que tengas ya no sea compatible con lo que expliqué en el video. El año que viene volveré a hacer este video con la nueva versión de Apex Charts. Te recomiendo para despejar cualquier duda, que directamente descargues el proyecto del github y lo compares con el tuyo. Saludos!
muchas gracias amigo me sirvio tu explicacion, tengo una pregunta de casualidad no tienes un video de como jalar datos de firebase y mostrarlos en la grafica
Hola Buenas tardes, hace poco empece a trabajar con Typescript y me ha estado saliendo este error en el ejemplo.component.html : "error TS2532: Object is possibly 'undefined'. [chart]="chartOptions.chart" Probe usando Non-Null Assertions pero no me funciono
Excelente video
Para los que tienen el error en el tipado simplemente en el type ChartOptions ponganle tipo any luego de el tipado que te da la libreria (ej: chart: ApexChart | any) y listo
Excelente, me sirvió bastante, saludos.
Les añado la opción que yo implementé y es más fácil, además que no es necesario usar el time:
en el html añades lo siguiente:
en el ts yo creé una función ya que yo genero la información desde un AJAX:
Generatechart(existencia){
var options = {
theme: {
mode: 'light',
},
series: [
{
name: 'Existencia',
data: [existencia]
}
],
responsive: [{
breakpoint: undefined,
options: {},
}],
chart: {
type: "bar",
height: 500,
selection: {
enabled: false
},
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: "55%",
}
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ["transparent"]
},
xaxis: {
categories: [
"Existencia",
]
},
yaxis: {
title: {
text: ""
}
},
fill: {
opacity: 1
},
tooltip: {},
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
}
Yo le mando los datos a la función o pueden eliminar la variable existencia y poner los datos manual, saludos.
muy buen canal, excelente explicacion. Son muy dificiles de encontrar canales asi
Muchísimas gracias por el comentario!
Hice exactamente lo mismo pero me da error en el html error TS2322: Type 'ApexAxisChartSeries | undefined' is not assignable to type 'ApexAxisChartSeries | ApexNonAxisChartSeries'.
Type 'undefined' is not assignable to type 'ApexAxisChartSeries | ApexNonAxisChartSeries'.
a mi se me renderiza con width pequeño y si lo agrando sigue sin verse. que puede estar fallando?
no lo hago en el app component, lo hago en otra pagina
Pueden ser dos cosas. O que te haya faltado algún ajustecito o algo del css, o que la versión que tengas ya no sea compatible con lo que expliqué en el video. El año que viene volveré a hacer este video con la nueva versión de Apex Charts.
Te recomiendo para despejar cualquier duda, que directamente descargues el proyecto del github y lo compares con el tuyo.
Saludos!
Excelente video!! Es el unico en su especie respecto a charts en ionic asi que excelente. Suscrito!
Gracias! Planeo seguir subiendo videos de Ionic y Charts así que seguro te van a ser útiles. Saludos!
Hola amigo, muy buen video, ¿una pregunta, si yo quiero tener dos graficos de esos, como puedo ponerle un nombre a cada chart?, para diferenciarlos.
Hola estimado. Buena pregunta! Haré un video al respecto
Muchas gracias, por tan excelente video.
Gracias por el comentario! Espero le sea útil! Actualmente lo estoy usando para productos propios desarrollados en Ionic y va muy bien
muchas gracias amigo me sirvio tu explicacion, tengo una pregunta de casualidad no tienes un video de como jalar datos de firebase y mostrarlos en la grafica
De momentos no he creado ningún video usando Firebase. Saludos!
Hola Buenas tardes, hace poco empece a trabajar con Typescript y me ha estado saliendo este error en el ejemplo.component.html :
"error TS2532: Object is possibly 'undefined'.
[chart]="chartOptions.chart"
Probe usando Non-Null Assertions pero no me funciono
Buenas, puedes compartirme el archivo completo? (Sino también en el github encontrarás el proyecto de ejemplo).
Estoy teniendo este error en la parte de declarar options "Property 'options' has no initializer and is not definitely assigned in the constructor."
Hola! Te grabé un Short con la respuesta! Gracias por escribirme
th-cam.com/users/shortsDzQfa7acsYc?feature=share
yo le quite esa parte a las graficas y las edite con scss
es bueno hacer eso para actualizar la grafica?
Para actualizar la gráfica se utiliza el método .updateSeries. Aquí te dejo un link: apexcharts.com/javascript-chart-demos/line-charts/realtime/
@@ACodearla gracias
@@ACodearla gracias