2

I am trying to plot histogram using angular 4. I would be having an array of data consisting 1000 values each. if there are two arrays, I should be able to show histgrams. The requirement is that only the histogram needs to be plotted not the data.

The link below plots histogram as well data. I need to hide the data bit which is currently shown as scatter points. How do I do that ?

http://jsfiddle.net/x51b6pvs/15/

angular histogram component

import { Component, Input,OnInit  } from '@angular/core';

@Component({
    selector: 'histogramchart',
    template: '<chart [options]="options" (load)="getInstance($event.context)"></chart>',
    styles: [`
        chart{
              display: block;
              width: 100% !important;
              padding:0;
        }
    `]
})
export class HistogramChartComponent  {

    public options: any;
    chart: any;

    @Input() public series: any;


    ngOnInit(){
    }

    constructor() {

        this.options = {
              credits: {
                enabled: false
            },    
            title: {
                text: ''
            },
              chart: {
                type: 'histogram'
            },
             legend: {
                align: 'right',
                verticalAlign: 'bottom',
                layout: 'horizontal',
                margin: 25,
                itemMarginTop: 0,
                symbolRadius: 0,
                symbolHeight: 20,
                symbolWidth: 20
            },

            xAxis: [{
                title: { text: 'Ending Surplus' },
                alignTicks: false
            }, {
                title: { text: 'Count of Ending Surplus' },
                alignTicks: false,

            }],

            yAxis: [{
                title: { text: '' }
            }, {
                title: { text: '' },

            }],

            series: [{
                 type: 'histogram',
                 xAxis: 1,
                 yAxis: 1,
                 zIndex: -1,
                  baseSeries: 's1',
                 showInLegend: false

            }]

        };
    }


    getInstance(chartInstance): void {
        this.chart = chartInstance;
        this.redraw();
    }


    ngOnChanges(data: any) {
        if (!data.series.currentValue || !this.chart) return;
        data.series.currentValue.map(s => {
            this.chart.addSeries(s);
        });
        this.chart.reflow();
    }

      redraw() {
        if (!this.chart) return;

        this.series.map(s => {
            if(s!=null)
            this.chart.addSeries(s);
        });    
      }
}
Tom
  • 8,175
  • 41
  • 136
  • 267
  • You need to set `series.visibility: false` for the series you would like to hide, like this: http://jsfiddle.net/x51b6pvs/16/. I am not familiar with how the angular version of highchart works, but I am sure there must be some similar way to achieve this. – ewolden Mar 20 '18 at 14:47
  • Thanks that works. All i need to do is pass those values along with the series from angular for it to work – Tom Mar 20 '18 at 15:05

0 Answers0