0
121
Views¿Hay alguna manera de aplicar css en la información sobre herramientas de chart.js V3.7.0 sin que sea personalizado o externo?
Tengo esta información sobre herramientas:
Y quiero darle algo de margen para ir más top . ejemplo:
Este es el código de información sobre herramientas:
tooltip: { caretPadding: 3, caretSize: 0, displayColors: false, backgroundColor: 'rgba(45,132,180,0.8)', bodyFontColor: 'rgb(255,255,255)', callbacks: { title: () => { return }, label: (ttItem) => ( `${ttItem.parsed.y} ppm` ), afterBody: (ttItems) => (ttItems[0].label) } },Pregunta :
¿Cómo puedo dar css a la información sobre herramientas para que se acerque a la parte superior?
1 answers
Answer question0
No puede usar CSS ya que no es un estilo HTML porque está dibujado en el lienzo.
Lo que puede hacer es proporcionar un posicionador personalizado para la información sobre herramientas de chart.js.
En el Ejemplo a continuación puede ver cómo hacerlo. Al aumentar la variable yOffset que declaré en la parte superior, la información sobre herramientas se moverá más arriba del punto y al aumentar la variable xOffset que declaré en la parte superior, la información sobre herramientas se moverá más hacia la derecha:
const yOffset = 10; const xOffset = 00; Chart.Tooltip.positioners.custom = function(items) { const pos = Chart.Tooltip.positioners.average(items); // Happens when nothing is found if (pos === false) { return false; } const chart = this.chart; return { x: pos.x + xOffset, y: pos.y - yOffset, yAlign: 'bottom', }; } const options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderWidth: 1 } ] }, options: { plugins: { tooltip: { caretPadding: 3, caretSize: 0, displayColors: false, backgroundColor: 'rgba(45,132,180,0.8)', bodyFontColor: 'rgb(255,255,255)', callbacks: { title: () => { return }, label: (ttItem) => (`${ttItem.parsed.y} ppm`), afterBody: (ttItems) => (ttItems[0].label) }, position: 'custom' } } } } 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.7.0/chart.js"></script> </body>