adjust line-height/ellipses in bar chart axis labels - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

adjust line-height/ellipses in bar chart axis labels

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Dealing with axis label line-height/ellipsis in HighCharts 5 CSS Styled mode</title> 
      <link rel="stylesheet" href="https://code.highcharts.com/css/highcharts.css"> 
      <style>

/* https://code.highcharts.com/css/highcharts.css */
body {//from  w w  w  .ja va2  s .  com
   max-width: 640px;
   margin: 2em auto;
   text-align: center;
   font-family: courier;
}
body * {
   font-family: courier;
}
#container {
   min-width: 310px;
   max-width: 500px;
   height: 200px;
   margin: 0 auto;
}
.highcharts-xaxis-labels {
   font-size: 15px;
}
.highcharts-xaxis-labels text:nth-child(odd) {
   fill: blue !important;
}
.highcharts-xaxis-labels text:nth-child(even) {
   fill: red !important;
}


      </style> 
   </head> 
   <body translate="no"> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <strong>Question:</strong>
       Can we adjust the line-height of axis labels in Highcharts when using CSS styled mode? 
      <div id="container"></div> 
      <p>
         <strong>Using CSS styled branch:</strong>
          https://code.highcharts.com/js/highcharts.js
      </p> 
      <p>
         <strong>With CSS:</strong>
          https://code.highcharts.com/css/highcharts.css
      </p> 
      <script>
      Highcharts.chart('container', {
    chart: { type: 'bar' },
    title: { text: null },
    legend: { enabled: false},
    credits: { enabled: false },
    xAxis: {
       categories: [
          'Sweden',
          'Federal Democratic Republic of Ethiopia',
          'Finland',
          'United Kingdom of Great Britain and Northern Ireland',
          'Oceania'],
         labels: {
                style: {
                    fontSize:'15px',
                    textOverflow: 'none',
                    lineHeight: "12"
                }
            }
    },
    yAxis: {
        visible: false,
        labels: {
            overflow: 'justify'
        }
    },
    series: [{
        name: 'Year 1800',
        data: [107, 313, 635, 203, 262]
    }]
});
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials