Highchart in Spring boot


I try to use hightchart in spring boot to plot a line graph. But I can’t get line chart but only show blank result in my view.
This is my view side

        dataType: 'json'
        success: function(result){
            var month = JSON.parse(result).month;
            var report = JSON.parse(result).report;
            drawLineChart(month, report);
    function drawLineChart(month,report){
    document.addEventListener('DOMContentLoaded', function () {
       var chart = Highcharts.chart('container', {
            chart: {
                type: 'line'
            title: {
                text: 'Fruit Consumption'
            xAxis: {
                categories: month
            yAxis: {
                title: {
                    text: 'Fruit eaten'
            series: [{
                name: 'Jane',
                data: report
    <!--Here to show the graph -->
    <div id="container"></div>

My controller that use Json

    public String getDataFromDb(@AuthenticationPrincipal UserDetails user) {
    User currentuser = userRepository.findByUsername(user.getUsername());
    Optional<Hawker> hawker = hawkerService.getHawkerByUserId(currentuser.getId());
    //Get the report list
    List<Report> reportList = reportService.findByHawId(hawker.get().getHaw_id());

    JsonArray jsonMonth = new JsonArray();
    JsonArray jsonReport = new JsonArray();
    JsonObject json = new JsonObject();

    json.add("month", jsonMonth);
    json.add("report", jsonReport);

    return json.toString();

When I remove the ajax and add in the manual data, it do show the graph. Please help me, Thank you.


You don’t need to manually create json in your controller code, spring boot will handle it for you. You should create a dto class in a form which is expected by your javascript.

Which is in your case:

public class LineChartDto {
  private List<Integer> month; // you better call this "months" or "monthList"
  private List<BigDeciamal> report; // why do you call this "report" while this is actually "sales" 

  // all args constructor, getters

And your controller method would be:

@ResponseBody // or use @RestController
public LineChartDto getSalesLineChartData(..) {
  List<Report> reportList = ..

  List<Integer> months = reportList.stream()
      .map(report -> report.getMonth()+1)

  List<BigDecimal> sales = reportList.stream()
      .map(Report::getTotal_sales) // better name this getTotalSales

  return new LineChartDto(months, sales);

Response will result in json object:

  "month": [1, 2, ... ],
  "report": [100, 200, ... ]

As for why you ajax doesn’t work – the question is too broad. Start with Chrome Dev Tools Network to check what network communication is happening, check browser console for errors, add some console.log() or better debug your js.

This line document.addEventListener('DOMContentLoaded', function () looks suspicious to me. I don’t think you need to addEventListener each time you call your chart.
Probably you should do this:

function drawLineChart(month,report){
    Highcharts.chart('container', {

Answered By – ILya Cyclone

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published