Tengo un gráfico donde todos los puntos visuales están deshabilitados, los he deshabilitado haciendo esto:
const options = { elements: { point: { radius: 0, }, }Mi problema es que en realidad quiero tener el punto habilitado solo para el último punto, vea esta imagen: http://prntscr.com/1tq0zql
Encontré una manera de apuntar a esa última línea usando segmentos:
const data = { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], datasets: [ { data: tgpDatasets, borderColor: "rgba(103,120,137,1)", borderWidth: 1, segment: { borderColor: ({ p0DataIndex, p1DataIndex }) => p0DataIndex === 8 && p1DataIndex === 9 && "red", }, }, ], };El código anterior hará que la última línea del gráfico sea roja, vea esta captura de pantalla: http://prntscr.com/1tq155f
Mi pregunta es cómo habilitar un punto para ese último punto del gráfico y establecer sus propiedades, cuando el radio se controla desde el objeto de options y no desde el objeto del dataset de datos.
Puede usar opciones programables para esto así:
const options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'pink', backgroundColor: 'pink' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderColor: 'orange', backgroundColor: 'orange' } ] }, options: { elements: { point: { radius: (ctx) => (ctx.chart.data.datasets[ctx.datasetIndex].data.length - 1 === ctx.index ? 10 : 0) } } } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> </body>