How to use high charts in Angular?

Question

I am using High chart-stacked column bar chart. I can able to get the Bar with skyblue and white colors but I need a bar with points at 24, 41 and 49 y_axis points as shown in the picutre. Please help me in achieve this. Thanks in advance. The code which I tried so far.

 export class AppComponent { title = 'Smaple'; options = { chart: { type: 'column' }, title: { text: 'Stacked' }, xAxis: { categories: ['data1', 'data2', 'data3', 'data4'] }, yAxis: { min: 0, tickInterval: 50, max: 100 }, tooltip: { headerFormat: '<b>{point.x}</b><br/>', pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}' }, plotOptions: { column: { stacking: 'normal', }, series: { borderColor: '#000' } }, series: [{ name: 'Total', data: [{ y: 20, color: "white"}] }, { name: 'Actual', data: [{ y: 80, color: "skyblue"}], }] };

Answer 1

You can use Highcharts.SVGRenderer and render additional elements on each column. Firstly use renderer.rect to create three rectangles, then renderer.path to create the line beetwen them. Notice that each time the chart is rendered you have to destroy the old elements and render new ones. Check the demo I posted below.

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

JS:

Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      render: function() {
        var chart = this,
          series = chart.series[1],
          points = series.points,
          yAxis = chart.yAxis[0],
          customPoints = [
            24,
            41,
            49
          ],
          path = [],
          height = 7,
          element,
          width,
          x,
          y,
          i;

        if (chart.customElements) {
          chart.customElements.forEach(function(elem) {
            elem.destroy();
          });
        }

        chart.customElements = [];

        points.forEach(function(point) {
          if (point.series.visible) {
            x = point.plotX + chart.plotLeft;
            width = point.pointWidth * 0.2;

            for (i = 0; i < customPoints.length; i++) {
              y = yAxis.toPixels(customPoints[i]);

              if (i === 0) {
                path.push('M');
              } else {
                path.push('L');
              }

              path.push(x);
              path.push(y);

              element = chart.renderer.rect(x - (width / 2), y, width, height)
                .attr({
                  strokeWidth: 1,
                  fill: '#000'
                })
                .add()
                .toFront();

              chart.customElements.push(element);
            }

            element = chart.renderer.path(path)
              .attr({
                'stroke-width': 1,
                stroke: '#000',
                fill: '#000'
              })
              .add()
              .toFront();

            chart.customElements.push(element);
          }
        });
      }
    }
  },
  plotOptions: {
    column: {
      stacking: 'normal',
    },
    series: {
      borderColor: '#000'
    }
  },
  series: [{
    name: 'Total',
    data: [{
      y: 20,
      color: "white"
    }]
  }, {
    name: 'Actual',
    data: [{
      y: 80,
      color: "skyblue"
    }]
  }]
});

Demo: https://jsfiddle.net/BlackLabel/hn96dfwm/

Answer 2

This work for me:

Install library

npm install --save highcharts

In your component where you desire render the chart:

    import * as Highcharts from 'highcharts';

    // Imports all modules you need and then inicialized
    declare var require: any;
    let Boost = require('highcharts/modules/boost');
    let Pareto = require('highcharts/modules/pareto');
    let noData = require('highcharts/modules/no-data-to-display');
    let More = require('highcharts/highcharts-more');
    
    Boost(Highcharts);
    noData(Highcharts);
    Pareto(Highcharts);
    More(Highcharts);
    noData(Highcharts);


   export class YourNameComponent implements OnInit {

    options: any = {
    title: {
      text: null // Your title
    },
    chart: {
      type: 'spline'  // type chart
    },
    tooltip: {
      crosshairs: true,
      shared: true
    },
    yAxis: {
      title: {
        text: 'Ventas'
      }
    },
    xAxis: {
      title: {
        text: 'Mobiliario'
      },
      categories: [] // Your categories
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle'
    },
    plotOptions: {
      spline: {
        marker: {
          radius: 4,
          lineColor: '#666666',
          lineWidth: 1
        }
      }
    },
    series: [] // Your data series
  };

    ngOnInit(): void {
     this.initChart();
    }


    initChart(): void {
       const idElementHtml = 'your id chart container';
       const chartR = document.getElementById(idElementHtml) // or you can use ViewChild as well;
       if (typeof chartR !== undefined && chartR !== null){
          Highcharts.chart(idElementHtml, this.options);
       }
    }
  }
}