Estoy tratando de quitar los ejes y dejar que SOLO aparezca la línea del gráfico, podría golpearme la cabeza contra la pared unas cuantas veces más antes de desmayarme, así que por favor ayúdenme. Aquí está el componente, intenté acceder a la instancia de opciones pero tampoco sé dónde debo usarlo.
Intenté usar la instancia de opciones en data() pero sin éxito, probablemente sea un error fácil, pero es la primera vez que uso vuechartjs
<template> <div class="col-sm-3 col-md-5 p-3"> <span class="m-3">Balance</span> <LineChartGenerator :chart-options="chartOptions" :chart-data="chartData" :chart-id="chartId" :dataset-id-key="datasetIdKey" :plugins="plugins" :css-classes="cssClasses" :styles="styles" :width="50" :height="100" /> </div> </template> <script> import { Line as LineChartGenerator } from 'vue-chartjs' import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, CategoryScale, PointElement } from 'chart.js' ChartJS.register( Title, Tooltip, Legend, LineElement, LinearScale, CategoryScale, PointElement ) export default { name: "BalanceG", components: { LineChartGenerator, }, props: { chartId: { type: String, default: 'line-chart' }, datasetIdKey: { type: String, default: 'label' }, width: { type: Number, default: 100 }, height: { type: Number, default: 100 }, cssClasses: { default: '', type: String }, styles: { type: Object, default: () => {} }, plugins: { type: Array, default: () => [] } }, data() { return { chartData: { labels: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July' ], datasets: [ { label: 'Data One', data: [10, 90, 34, 35, 88, 12, 40], borderColor: "#F1603F", pointRadius: 0, } ] }, chartOptions: { responsive: true, maintainAspectRatio: false, plugins:{ legend:{ enable:false, display:false, position: "top", } } }, } } } </script>Debe deshabilitar los ejes en su objeto de opciones de esta manera:
chartOptions: { scales: { x: { display: false }, y: { display: false } } }