Estoy trabajando en un gráfico de anillos en Highcharts donde estoy mostrando algunos datos. La cuestión es que cuando se muestra el gráfico de anillos, hay un poco de superposición entre los tipos de datos. Si desea ver el gráfico en jsfiddle, aquí está el html para ello
<script src="https://code.highcharts.com/highcharts.js"></script> <div id="container" style="height: 400px"></div>y el codigo js
Highcharts.chart('container', { chart: { type: 'pie', margin: [0, 0, 0, 0] }, xAxis: { categories: ['Jan', 'Feb', 'Mar'] }, plotOptions: { pie: { startAngle: 90, innerSize: '99%', borderWidth: 16, slicedOffset: 40, borderColor: undefined, dataLabels: { enabled: false }, states: { hover: { brightness: 1, halo: { size: 0 } } } } }, series: [{ data: [29.9, 71.5,50] }] });Si pasa el cursor sobre una de las series en el gráfico de anillos, la línea llega a la otra. Mi pregunta es si hay una opción para que las líneas no se superpongan entre sí, de modo que el extremo no esté redondeado pero tenga bordes afilados que no se superpongan. Gracias por cualquier ayuda.
Hay dos enfoques.
visibility como falso y configurar series.ignroeHiddenPoint como falso - https://jsfiddle.net/BlackLabel/h2m0e35a/ - aquí deberá implementar alguna lógica para calcular la cantidad y los valores de esos puntos ficticios.Finalmente me las arreglé para averiguarlo. Todo lo que tenía que hacer era establecer borderWidth en 0 y cambiar el tamaño interno, por ejemplo, 80 % (este depende de qué tan ancha quieras que sea la dona).