Highchart - Preprocess data using json-CodePudding

I am trying to generate a simple bar chart with the json data. Here is what I have tried without using the json data (http://jsfiddle.net/6hkcn4qf/2/).

I need to use this mock json https://mocki.io/v1/af3abd57-1c07-4df0-b591-4d17796e2c29 to generate the same bar. Here is the fiddle I am trying to achieve http://jsfiddle.net/6hkcn4qf/3/. It is not generating the chart based on the highchart documentation.

Can someone guide me on how to achieve this?

Also, how to change the bar colors dynamically based on the fruit name in this?

Thanks

CodePudding user response：

You need to preprocess your data and adapt it to the format required by Highcharts. For example:

  $.ajax({
    url: 'https://mocki.io/v1/af3abd57-1c07-4df0-b591-4d17796e2c29',
    success: function(data) {
      const processedData = [];

      for (let key in data) {
        processedData.push({
          name: key,
          y: data[key]
        });
      }

      options.series[0].data = processedData;
      Highcharts.chart('container', options);
    }
  });

Live demo: http://jsfiddle.net/BlackLabel/wm2pzrxj/

API Reference: https://api.highcharts.com/highcharts/series.bar.data