CODEWITHSUNDEEP
javascripthighcharts
Jyoti Puri
Jyoti Puri

Reputation: 1346

Marking specific point on highchart column

I am working to create highchart for a marketing team, please check this:

http://jsfiddle.net/jyotipuri/kh5jY/5124/

$(function () {
    $('#container').highcharts({
        chart: {
          renderTo: 'container',
          events: {
            load: function () {
              Highcharts.updateMarketMarkers(this);
            },
            redraw: function () {
              Highcharts.updateMarketMarkers(this);
            }
          }
        },
        title: {
          text: null
        },
        xAxis: [
          {
            categories: ['North','South','East', 'West']
          }
        ],
        yAxis: [
          {
            title: null,
            labels: {enabled: false},
            stackLabels: {
              enabled: true,
              style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
              }
            }
          },
          {
            title: null,
            labels: {enabled: false}
          }
        ],
        tooltip: false,
        plotOptions: {
          column: {
            pointPadding: 0,
            borderWidth: 0
          },
          series: {
            point: {
              events: {
                click: function () {
                  $scope.drillChart(this.category);
                }
              }
            }
          }
        },
        series: [
          {
            name: 'Jan',
            data: [23, 45, 24, 30],
            type: 'column'
          },
          {
            name: 'Feb',
            data: [50, 40, 25, 10],
            type: 'column'
          }
        ]
      });
});

The columns here show sales in various regions, I need to be able to mark out specific point on the columns that will be sales target and it will show is sales met the target. The marking has to be done for both columns (Jan, Feb) for all 4 regions (NORTH, SOUTH, WEST, EAST).

Upvotes: 1

Views: 277

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

How would you mark out that points? I think you can achieve that in two ways:

  • using column series with low options (or columnrange series): http://jsfiddle.net/kh5jY/5132/

  • using scatter just to put marker on such point: http://jsfiddle.net/kh5jY/5133/

    {
    name: 'South target',
    data: [20, 20, 20, 20],
    zIndex: 10,
    pointPlacement: 0.15,
    type: 'scatter'
}, {
    name: 'North target',
    data: [20, 20, 20, 20],
    zIndex: 10,
    pointPlacement: -0.15,
    type: 'scatter'
}

Upvotes: 3

Related Questions