0
256
Vistas¿Cómo ajustar espacios entre puntos en chart js?
Estoy tratando de hacer un gráfico de líneas usando chart.js. Pero me enfrento a un problema. Quiero controlar el espacio entre los puntos, pero chart.js lo iguala.
Aquí está mi código:
<canvas id="myChart"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js" integrity="sha512-OD9Gn6cAUQezuljS6411uRFr84pkrCtw23Hl5TYzmGyD0YcunJIPSBDzrV8EeCiFxGWWvtJOfVo5pOgB++Jsag==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> var ctx = document.getElementById("myChart"); var points = [1,1,9,9.3]; var Dates = ["Dec 29th", "jan 10th", "Feb 21st", "Feb 25th"]; var myChart = new Chart(ctx, { type: "line", data: { labels: Dates, datasets: [ { label: "My chart", data: points, backgroundColor: "black", borderColor: "blue", borderWidth: 3, fill: false, lineTension: 0.4, } ] }, options: { legend: {display: false}, scales: { yAxes:[{ ticks: { min:1, max: 9.9, callback: function(value, index, values) { return '$' + value; } } }], }, elements: { point:{ radius: 0 } } } }); </script> Aquí está el resultado de mi código: 
Pero quiero el gran espacio en el medio así: 
¿Cómo puedo hacer el gran espacio entre el punto 3 y el punto 4, por favor?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
¿Puedes usar el tiempo en el eje x?
A continuación se muestra un ejemplo
// "+" before (new Date(2021,11,29)) return miliseconds from 1970 year const dataA = [ {x:+new Date(2021,11,29), y:1}, // { x: 1640732400000, y: 1}, {x:+new Date(2022,0,10), y:1}, // { x: 1641769200000, y: 1}, {x:+new Date(2022,1,21), y:9}, // { x: 1645398000000, y: 9}, {x:+new Date(2022,1,25), y:9.3}, // { x: 1645743600000, y: 9.3} ]; const cfgChart = { type: 'line', data: { datasets: [ { backgroundColor: '#74adf7', borderColor: '#74adf7', data: dataA, label: 'A', lineTension: 0.4, }, ], }, options: { animation: false, parsing: false, interaction: { mode: 'index', axis: 'x', intersect: false, }, scales: { x: { type: 'time', }, }, }, }; const chart = new Chart(document.querySelector('#chart').getContext('2d'), cfgChart); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.3.1/luxon.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-luxon/1.1.0/chartjs-adapter-luxon.min.js"></script> <div> <canvas id="chart"></canvas> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta