0
349
ViewsEstilo de fondo (relleno) con ChartJs y React
Quiero crear un gráfico de líneas, con el estilo de un gráfico de área, en React usando la biblioteca chartJS ('react-chartjs-2')
Esto es lo que quiero lograr, como un fondo (relleno) con algo de opacidad debajo de la línea:
Código:
import React from 'react'; import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, } from 'chart.js'; import { Line } from 'react-chartjs-2'; import faker from 'faker'; ChartJS.register( CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend ); export const options = { responsive: true, plugins: { legend: { position: 'top' as const, }, title: { display: true, text: 'Chart.js Line Chart', }, }, }; const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; export const data = { labels, datasets: [ { label: 'Dataset 1', data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })), borderColor: 'rgb(255, 99, 132)', backgroundColor: '#000000', fill: { target: 'origin', above: 'rgb(255, 0, 0)', // Area will be red above the origin below: '#000000' // And blue below the origin } }, { label: 'Dataset 2', data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })), borderColor: 'rgb(53, 162, 235)', backgroundColor: 'rgba(53, 162, 235, 0.5)', }, ], }; export function App() { return <Line options={options} data={data} />; }¿Cómo puedo lograr esto con ChartJS ('react-chartjs-2')?
·
Juan Pablo Isaza
1 answers
Answer question0
Sí, ChartJS/react-chartjs-2 admite esto. Para hacer esto, necesitas:
- Importe/registre el complemento chart.js
Filler(mencionado en los documentos para gráficos de área ) - Establezca la
tensionde la línea (para hacer que las líneas se curven) y; - Configure las opciones de
fillpara el conjunto de datos.
Siguiendo estos pasos esto producirá:
Por ejemplo:
import React from "react"; import { Line } from "react-chartjs-2"; import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler // 1. Import Filler plugin } from "chart.js"; import faker from "faker"; ChartJS.register( CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler // 1. Register Filler plugin ); export const options = { responsive: true, tension: 0.3 // 2. Set the tension (curvature) of the line to your liking. (You may want to lower this a smidge.) }; const labels = ["January", "February", "March", "April", "May", "June", "July"]; export const data = { labels, datasets: [ { label: "Dataset 1", data: labels.map(() => faker.datatype.number({ min: 0, max: 500 })), borderColor: "rgb(255, 99, 132)", backgroundColor: "rgba(255, 0, 0)", fill: { target: "origin", // 3. Set the fill options above: "rgba(255, 0, 0, 0.3)" } }, { label: "Dataset 2", data: labels.map(() => faker.datatype.number({ min: 0, max: 500 })), borderColor: "rgb(53, 162, 235)", backgroundColor: "rgba(53, 162, 235, 0.3)", fill: "origin" // 3. Set the fill options } ] }; export function App() { return <Line options={options} data={data} />; }Código Sanbox de trabajo: https://codesandbox.io/s/chartjs-area-chart-p1o023?file=/App.tsx:817-846
·
Juan Pablo Isaza
Report
Answer question