Estoy trabajando con gráficos, pero he estado buscando para que sea de manera horizontal el grafico utilizando el tipo de gráfico 'bar'
, estoy utilizando estas versiones:
"ng2-charts": "4.1.1",
"chart.js": "4.2.0",
A la hora de buscar información de como realizar el grafico llegue a esta configuración:
import { ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';
import DataLabelsPlugin from 'chartjs-plugin-datalabels';
@ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;
public barChartOptions: ChartConfiguration['options'] = {
responsive: true,
// We use these empty structures as placeholders for dynamic theming.
scales: {
x: { },
y: {
min: 10
}
},
plugins: {
legend: {
display: true,
},
datalabels: {
display: false,
anchor: 'end',
align: 'end'
}
}
};
public barChartType: ChartType = 'bar';
public barChartPlugins = [
DataLabelsPlugin
];
Y para hacer la asignación de la información la hago de esta manera: this.dashService.listFacturasComparativos().subscribe((data: any) => { this.dataFacturas = data;
let mappedData: MappedData = {
labels: [],
datasets: [
{
label: 'Presupuesto',
data: [],
type: 'line'
},
{
label: 'Real',
data: [],
type: 'bar'
}
]
};
for (let i = 0; i < this.dataFacturas.length; i++) {
mappedData.labels.push(this.dataFacturas[i].ejercicio);
mappedData.datasets[0].data.push(this.dataFacturas[i].p_PRESUPUESTO);
mappedData.datasets[1].data.push(this.dataFacturas[i].p_REAL);
}
this.dataFormatFacturas = mappedData;
});
Todo esto utilizando las siguientes interfaces
interface Dataset {
label: string;
data: number[];
type: string;
}
interface MappedData {
labels: string[];
datasets: Dataset[];
}
En el HTML, esta así:
<canvas baseChart class="chart"
[data]="this.dataFormatFacturas"
[options]="barChartOptions"
[plugins]="barChartPlugins"
[type]="barChartType">
</canvas>
Y muestra el gráfico, el verdadero problema viene cuando lo trato de colocar de manera horizontal, ya que investigando en este link, o este otro veo que configuran al menos en el segundo de esta manera:
public barChartType: ChartType = 'horizontalBar';
Pero para la versión que estoy trabajando no encuentra ese tipo de gráfico, trate de instalar las versiones estas:
"chart.js": "^2.7.3",
"ng2-charts": "2.0.0-beta.9"
Pero me marcan un montón de errores ya que utilizo angular 14 y no se como configurar lo ya que en otros links, me mandan a utilizar la siguiente manera:
options: {
scales: {
yAxis: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
barThickness: 10
}]
},
legend: {
display: false
}
}
Pero me marcan errores al utilizar yAxis