i want to show below data (sample data from my api) on react highchart line chart. but i am confuse how to prepare this data. the chart should be look alike, at Aaxis all assignments name and at y axis if 4 assignment name then look at data each object have values array. so 4 assignment names means 4 charts with multiple data labels. look at below screen shot. first image is what my chart should look alike. the second screenshot is how my chart giving error data is not loading.i am also attaching codesandbox link. the data is too much i have total 30 assignments names with array of datalabels but right now i am attaching only 4.

codesandbox link : https://codesandbox.io/s/customizable-react-dashboard-with-chart-fork-forked-15rfpq?file=/src/LineHighchart.js

my sample Data:

const data ={"data":[{"assignment_name":"assignment for oliver","0":26,"1":1,"2":70,"3":80,"4":100,"5":10,"6":0,"7":0},{"assignment_name":"assignment","0":25,"1":0,"2":19,"3":35,"4":310,"5":0,"6":0,"7":0},{"assignment_name":"assignment2","0":27,"1":20,"2":10,"3":30,"4":50,"5":90,"6":0,"7":0},
                    {"assignment_name":"assignment2","0":29,"1":0,"2":10,"3":0,"4":30,"5":0,"6":60,"7":10},
                    ]}

CodePudding user response：

I am not familiar with the react wrapper for Highcharts, but here is a plain vanilla Highcharts object to show a line graph with two series and five data points, which might help you dig further:

{
    "chart": {
        "height": 436
    },
    "xAxis": {
        "categories": [
            "2019-12-30",
            "2020-01-06",
            "2020-01-13",
            "2020-01-20",
            "2020-01-27",
        ],
        "title": {
            "text": "Week",
        }
    },
    "series": [{
            "name": "Count",
            "type": "line",
            "data": [ 6, 9, 7, 6, 5 ]
        }, {
            "name": "Slope",
            "type": "spline",
            "data": [ 5.9, 6.23, 6.57, 6.9, 7.23 ]
        }
    ]
}

UPDATE:

Here is the answer for your comment question: "can u make array of object from my given data and then give that variable to series":

const data ={
  "data": [
    {"assignment_name":"assignment for oliver",
     "0":26,"1":1,"2":70,"3":80,"4":100,"5":10,"6":0,"7":0},
    {"assignment_name":"assignment",
     "0":25,"1":0,"2":19,"3":35,"4":310,"5":0,"6":0,"7":0},
    {"assignment_name":"assignment2",
     "0":27,"1":20,"2":10,"3":30,"4":50,"5":90,"6":0,"7":0},
    {"assignment_name":"assignment2",
     "0":29,"1":0,"2":10,"3":0,"4":30,"5":0,"6":60,"7":10},
  ]
};
let categories = Object.keys(data.data[0]).filter(key => key.match(/^\d $/));
let series = data.data.map(obj => {
  return {
    name: obj.assignment_name,
    tyle: 'line',
    data: categories.map(key => obj[key])
  }
});
let chartObj = {
    "chart": {
        "height": 436
    },
    "xAxis": {
        "categories": categories,
        "title": {
            "text": "Assignments",
        }
    },
    "series": series
};
console.log(chartObj);