Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

<div id="container"></div>
<button id="large">Large</button>
<button id="small">Small</button>

JavaScript

const chartOptions = {
  chart: {
    type: 'column',
    inverted: true,
    height: 200


  },
  title: {
    text: ''
  },
  xAxis: {
    lineColor: 'white',
    categories: ['ABCD'],
    labels: {
      style: {
        fontSize: '12px' // Adjust the font size as needed
      }
    }
  },
  yAxis: {
    allowDecimals: false,
    max: 100,
    title: {
      text: ''
    },
    labels: {
      enabled: false // Hide y-axis labels
    },
    gridLineWidth: 0 // Remove grid lines
  },
  plotOptions: {
    column: {
      stacking: 'normal', // this will be our default
      dataLabels: {
        enabled: true,
        style: {
          color: 'black', // Set font color to black
          fontSize: '13px', // Set font size to 12px
          textShadow: 'none', // Remove text shadow
        },
        backgroundColor: 'rgba(0, 0, 0, 0)', // Set background color to transparent
        formatter: function() {
          return this.series.name + ': ' + Highcharts.numberFormat(this.y, 0) + '%';
        }
      }
    }
  },


  colors: ['#d37295', '#fabfd2'],
  series: [{
    name: 'LLLL!LLLL! LLLL!LLLL! LLLL!LLLL!LLLL!',
    data: [57]
  }, {
    name: 'XYZM XYZMXYZ MXYZMXYZM XYZMXYZM XYZM XYZM',
    data: [43]
  }],
  legend: {
    enabled: false // Hide the legend
  },
  credits: {
    enabled: false // Hide the credits
  },
  responsive: {
    rules: [{
      condition: {
        maxWidth: 850
      },
      chartOptions: {
        plotOptions: {
          column: {
            dataLabels: {
              style: {
                textOverflow: 'ellipsis',
                width: 50
              },
            }
          }
        }
      }
    }]
  }
};

const chart = Highcharts.chart('container', chartOptions);
document.getElementById('small').addEventListener('click', () => {
  chart.setSize(400, 300);
});

document.getElementById('large').addEventListener('click', () => {
  chart.setSize(800, 300);
});