Estoy haciendo unas pruebas con Highcharts y estoy creando los nodos por separado y no todo junto como ellos lo hacen.
var obj = {}, data = [], series = {}, labels = ['Culiacán', 'Durango', 'Mexicali', 'Monterrey', 'Michoacán', 'Nicaragua', 'Tijuana'];
labels.forEach(function(l){
let myObj = {};
myObj.name = l;
myObj.drilldown = l;
myObj.y = Math.floor( Math.random() * 1000 );
data.push( myObj );
});
series.name = 'Incidencias';
series.colorByPoint = true;
series.data = data;
obj.chart.type = 'pie';
obj.title.text = 'Total de registros por Unidad de Negocio';
obj.subtitle.text = 'Da click en cualquier parte del pastel';
obj.plotOptions.series.dataLabels.enabled = true;
obj.plotOptions.series.dataLabels.format = '{point.name}: {point.y:.2f}%';
obj.tooltip.headerFormat = '<span style="font-size:11px">{series.name}</span><br>';
obj.tooltip.pointFormat = '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> del total<br/>';
obj.series = [ series ];
Highcharts.chart('chart', obj);
#chart{
min-width: 310px;
max-width: 600px;
height: 400px;
margin: 0 auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="chart"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
Me está marcando un error en obj.chart.type = 'pie';
como si el nodo chart no existiese, si mal no recuerdo, Javascript si el nodo no existe lo crea solo, o cómo podría corregir esa parte?