how to set chart in center on full screen view in highchart

1
votes

enter image description here

I want to set this chart to center in highchart.

I have try use following code for chart

Highcharts.chart('container', { chart: { type: 'bar', height: '300' }, title: { text: '' }, subtitle: { text: '' }, xAxis: { categories: ["category 1","category 2"], crosshair: true, gridLineWidth: 0, title: { text: null } }, yAxis: { min: 0, max: 1050, gridLineWidth: 0, title: { text: '', align: 'high' }, labels: { overflow: 'justify', enabled: false } }, tooltip: { valueSuffix: ' ' }, plotOptions: { bar: { dataLabels: { enabled: true }, colorByPoint: true, }, series: { shadow: true, marker: { fillColor: '#FFFFFF', lineWidth: 1, lineColor: null, radius: 4 } } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -40, y: 80, floating: true, borderWidth: 1, backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF', enabled: false }, credits: { enabled: false }, colors: color_codes, exporting: { buttons: { contextButton: { menuItems: ["viewFullscreen", "printChart", "downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG", "downloadCSV", "downloadXLS"] } } }, series: [{ name: '', data: [10,20] } ] });

1
highcharts

1 Answers

1
votes

You should be able to achieve it by using the chart.update feature and by changing the marginLeft value while the fullscreen mode is loading.

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

events: {
  render() {
    const chart = this;

    if (chart.fullscreen.isOpen && chart.updateFlag) {
      const width = chart.chartWidth;
      chart.updateFlag = false;

      chart.update({
        chart: {
          marginLeft: width / 2
        }
      })

      chart.updateFlag = true;
    } else if (chart.updateFlag) {
      chart.updateFlag = false;

      chart.update({
        chart: {
          marginLeft: initialPlotLeft
        }
      })
      chart.updateFlag = true;
    }
  },
  load() {
    initialPlotLeft = this.plotLeft;
  }
}

API: https://api.highcharts.com/highcharts/chart.events.render

API: https://api.highcharts.com/highcharts/chart.marginLeft

API: https://api.highcharts.com/class-reference/Highcharts.Chart#update