Cómo hacer un gráfico de áreas con CSS

Quizás conozcas algunas formas de crear gráficos con CSS puro. Algunos de ellos se tratan aquí en CSS-Tricks , y muchos otros se pueden encontrar en CodePen , pero no he visto muchos ejemplos de “gráficos de áreas” (imagine un gráfico de líneas con el área inferior completa), particularmente ninguno en HTML. y CSS solo. En este artículo, haremos precisamente eso, utilizando una base HTML semántica y accesible.

Comencemos con el HTML.

Para simplificar las cosas, usaremos uletiquetas como envoltorios y lielementos para elementos de datos individuales. Puede utilizar cualquier otra etiqueta HTML en su proyecto, según sus necesidades.

ul  li 40% /li  li 80% /li  li 60% /li  li 100% /li  li 30% /li/ul

CSS no puede recuperar el texto HTML interno, es por eso que usaremos propiedades personalizadas de CSS para pasar datos a nuestro CSS. Cada elemento de datos tendrá propiedades personalizadas --starty --end.

ul  li 40% /li  li 80% /li  li 60% /li  li 100% /li  li 30% /li/ul

Esto es lo que debemos considerar…

Hay varios principios de diseño que debemos considerar antes de pasar al estilo:

• Datos de unidades: utilizaremos datos sin unidades en nuestro HTML (es decir px, no em, rem, %o cualquier otra unidad). Las propiedades personalizadas --starty --endserán números entre 0 y 1.
• Ancho de columnas: no estableceremos un valor fijo widthpara cada lielemento. Tampoco los usaremos %, ya que no sabemos cuántos elementos hay. El ancho de cada columna se basará en el ancho del contenedor principal, dividido por el número total de elementos de datos. En nuestro caso, ese es el ancho del ulelemento dividido por el número de lielementos.
• Accesibilidad: los valores dentro de cada uno lison opcionales y solo se requieren las propiedades personalizadas --starty . --endAun así, es mejor incluir algún tipo de texto o valor para que los lectores de pantalla y otras tecnologías de asistencia describan el contenido.

¡Ahora comencemos a peinar!

Comencemos primero con el estilo de diseño general. El elemento contenedor del gráfico es un contenedor flexible que muestra elementos en una fila y estira cada elemento secundario para llenar toda el área.

.area-chart {  /* Reset */  margin: 0;  padding: 0;  border: 0;  /* Dimensions */  width: 100%;  max-width: var(--chart-width, 100%);  height: var(--chart-height, 300px);  /* Layout */  display: flex;  justify-content: stretch;  align-items: stretch;  flex-direction: row;}

Si el contenedor del gráfico de áreas es una lista, debemos eliminar el estilo de la lista para tener más flexibilidad de estilo.

ul.area-chart,ol.area-chart {  list-style: none;}

Este código aplica estilo a todas las columnas del gráfico completo. Con los gráficos de barras es simple: usamos background-colory heightpara cada columna. Con los gráficos de área vamos a utilizar la propiedad para establecer la región que se debe mostrar.clip-path

Primero configuramos cada columna:

.area-chart  * {  /* Even size items */  flex-grow: 1;  flex-shrink: 1;  flex-basis: 0;  /* Color */  background: var(--color, rgba(240, 50, 50, .75));}

Para crear un rectángulo que cubra toda el área, buscaremos la clip-pathpropiedad y usaremos su polygon()función que contiene las coordenadas del área. Básicamente, esto no hace nada por el momento porque el polígono cubre todo:

.area-chart  * {  clip-path: polygon(    0% 0%,     /* top left */    100% 0%,   /* top right */    100% 100%, /* bottom right */    0% 100%    /* bottom left */  );}

¡Ahora para la mejor parte!

Para mostrar solo una parte de la columna, la recortamos para crear ese efecto similar a un gráfico de áreas. Para mostrar solo el área que queremos, usamos las propiedades personalizadas --starty --enddentro del clip-pathpolígono:

.area-chart  * {  clip-path: polygon(    0% calc(100% * (1 - var(--start))),    100% calc(100% * (1 - var(--end))),    100% 100%,    0% 100%  );}

En serio, este fragmento de CSS hace todo el trabajo. Esto es lo que obtenemos:

Trabajar con múltiples conjuntos de datos

Ahora que conocemos los conceptos básicos, creemos un gráfico de áreas con múltiples conjuntos de datos. Los gráficos de áreas suelen medir más de un conjunto de datos y el efecto es una comparación en capas de los datos.

Este tipo de gráfico requiere varios elementos secundarios, por lo que reemplazaremos nuestro ulenfoque con un archivo table.

table  tbody    tr      td 40% /td      td 80% /td    /tr    tr      td 60% /td      td 100% /td    /tr  /tbody/table

Las tablas son accesibles y compatibles con los motores de búsqueda. Y si la hoja de estilo no se carga por algún motivo, todos los datos siguen siendo visibles en el marcado.

Nuevamente usaremos las propiedades personalizadas --starty --endcon números entre 0 y 1.

table  tbody    tr      td 40% /td      td 80% /td    /tr    tr      td 60% /td      td 100% /td    /tr  /tbody/table

Entonces, primero diseñaremos el diseño general del elemento envolvente, nuestra tabla, a la que le hemos asignado una .area-chartclase:

.area-chart {  /* Reset */  margin: 0;  padding: 0;  border: 0;  /* Dimensions */  width: 100%;  max-width: var(--chart-width, 600px);  height: var(--chart-height, 300px);}

A continuación, convertiremos el tbodyelemento en un contenedor flexible, mostrando los trelementos en una fila y de tamaño uniforme:

.area-chart tbody {  width: 100%;  height: var(--chart-height, 300px);  /* Layout */  display: flex;  justify-content: stretch;  align-items: stretch;  flex-direction: row;}.area-chart tr {  /* Even size items */  flex-grow: 1;  flex-shrink: 1;  flex-basis: 0;}

Ahora necesitamos hacer que los tdelementos se cubran entre sí, un elemento uno encima del otro para obtener ese efecto de capas. Cada uno tdcubre toda el área del trelemento que lo contiene.

.area-chart tr {  position: relative;}.area-chart td {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;}

¡Pongamos en clip-path: polygon()práctica los poderes mágicos de! Solo mostramos el área entre las propiedades personalizadas --starty --endque, nuevamente, son valores entre 0 y 1:

.area-chart td {  clip-path: polygon(    0% calc(100% * (1 - var(--start))),    100% calc(100% * (1 - var(--end))),    100% 100%,    0% 100%  );}

Ahora agreguemos color a cada uno:

.area-chart td {  background: var(--color);}.area-chart td:nth-of-type(1) {  --color: rgba(240, 50, 50, 0.75);}.area-chart td:nth-of-type(2) {  --color: rgba(255, 180, 50, 0.75);}.area-chart td:nth-of-type(3) {  --color: rgba(255, 220, 90, 0.75);}

Es importante usar colores con opacidad para obtener un efecto más agradable, por eso usamos rgba()valores. Podrías usar hsla()aquí en su lugar, si así es como te mueves.

Y así, sin más:

Terminando

No importa cuántos elementos HTML agreguemos a nuestro gráfico, el diseño basado en flexibilidad garantiza que todos los elementos tengan el mismo tamaño. De esta manera, solo necesitamos establecer el ancho del elemento del gráfico envolvente y los elementos se ajustarán en consecuencia para un diseño responsivo.

Hemos cubierto una técnica para crear gráficos de áreas usando CSS puro. Para casos de uso avanzados, puede consultar mi nuevo marco de visualización de datos de código abierto, ChartsCSS.org . Consulte la sección Gráfico de áreas para ver cómo se pueden personalizar los gráficos de áreas con elementos como diferentes orientaciones, ejes e incluso un orden inverso sin cambiar el formato HTML, ¡y mucho más!