Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

329
Vistas
Highchart Treemap - rounded edges

I need to create a treemap with round corners as shown in the image

Treemap with round corners

I have tried:

  • Changing plotOptions.treemap.borderRadius set the radius for each box instead of the entire plot.

  • Using chart.borderRadius has no impact on the graph, I believe it is so because the plot itself is not going till the edge of the chart.

  • The rounded-corners library by highcharts does not work with treemaps. It is working well with bar charts

Any direction on how to achieve this is appreciated. Here's a jsfiddle of treemap for reference.

Here are options I have tried

const options = {
        chart: {
            borderRadius: 20,
        },
        credits: {
          enabled: false,
        },
        tooltip: {
          enabled: false,
        },

        plotOptions: {
          treemap: {
            // borderRadiusBottomRight: 25,
            // borderRadiusBottomLeft: 25,
            borderWidth: 2,
            borderRadius: 5,
            borderColor: "#FFFFFF",
          
            },
          },
        series: [
          {
            type: "treemap",
            data: [{
                    id: 'A',
                    name: 'Apples',
                    color: "#EC2500",
                    value: 10,
                }, {
                    id: 'B',
                    name: 'Bananas',
                    color: "#ECE100",
                    value: 15,
                }, {
                    id: 'C',
                    name: 'Oranges',
                    color: '#EC9800',
                    value: 20,
                }],
          },
        ],
        title: {
          text: "",
        },
      },
    };

Note:

  1. Legend or title is not required in the chart, the plot can be extended to the edges if possible
  2. All other charts are made with highcharts, would prefer doing the treemap with the same instead of using a different library for it.
  3. No drill-down is required.
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

You can add a clip-path to the highcharts-series class.

.highcharts-series {
  clip-path: inset(0% 0% 0% 0% round 15px);
}

https://jsfiddle.net/mqo78ah2/

You'll have to make the css more specific, so that you don't change your other charts.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda