CODEWITHSUNDEEP
javascriptjqueryhighcharts
manu
manu

Reputation: 99

How to show popup on highchart column click

I have to show table on every column click in highchart. I am able to show alert but instead of alert I want to modal popup.

plotOptions: {
    column: {
      stacking: 'normal',
      point: {
        events: {
          click: (e) => {
            $('#myModal').show();
            return `<div id="myModal" class="modal">
                      <div class="modal-content">
                        <div class="modal-header">
                    
                          <div class="modal-header-div">
                            <div class="tableTitle">Rule Violations Details</div>
                    
                          </div>
                        </div>
                        <div class="modal-body">
                          <h1>Show table</h1>
                        </div>
                        <div class="modal-footer">
                    
                        </div>
                      </div>
                    </div>`
          },
        }
      }

Upvotes: 0

Views: 803

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

Returning a string from the 'click' event function callback will not do anything. You need to manage the elements manually:

    plotOptions: {
        column: {
            stacking: 'normal',
            point: {
                events: {
                    click: (e) => {
                        var popupContent = `...`;

                        $('#popup').append(popupContent);
                    },
                }
            }
        }
    }

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

API Reference: https://api.highcharts.com/highcharts/plotOptions.column.events.click

Upvotes: 1

Related Questions