title: How do I set an echarts boxplot x-axis label?
body: <p>How can I change the x-axis labels on an echart boxplot? In the example, there are 5 datasets being plotted, and I need to be able to give them their own x-axis value/label. I'm more used to using chartjs, but they don't have box charts. For the purposes of this example, I'd need the labels to be ['PTM 07', 'PTM 08', 'PTM 09', 'PTM 10', 'PTM 11']</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;title&gt;eCHarts&lt;/title&gt;
  &lt;!-- including ECharts file --&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;!-- preparing a DOM with width and height for ECharts --&gt;
  &lt;div id=&quot;main&quot; style=&quot;width:600px; height:400px;&quot;&gt;&lt;/div&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
      // based on prepared DOM, initialize echarts instance
      var myChart = echarts.init(document.getElementById('main'));
  
      // specify chart configuration item and data
      var option = {
  title: [
      {
          text: 'Progress Test Progression',
          left: 'center'
      },
      {
          text: 'Some text',
          borderColor: '#999',
          borderWidth: 1,
          textStyle: {
              fontWeight: 'normal',
              fontSize: 14,
              lineHeight: 20
          },
          left: '10%',
          top: '90%'
      }
  ],
  dataset: [{
      source: [
          [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
          [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
          [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
          [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
          [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
      ]
  }, {
      transform: {
          type: 'boxplot',
          config: { 
              itemNameFormatter: 'Option {value}' }
      }
  }, {
      fromDatasetIndex: 1,
      fromTransformResult: 1
  }],
  tooltip: {
      trigger: 'item',
      axisPointer: {
          type: 'shadow'
      }
  },
  grid: {
      left: '10%',
      right: '10%',
      bottom: '15%'
  },
  xAxis: {
      type: 'category',
      boundaryGap: true,
      nameGap: 30,
      splitArea: {
          show: false
      },
      splitLine: {
          show: false
      }
  },
  yAxis: {
      type: 'value',
      name: 'Score',
      splitArea: {
          show: true
      }
  },
  series: [
      {
          name: 'boxplot',
          type: 'boxplot',
          datasetIndex: 1
      }
  ]};
  
      // use configuration item and data specified to show chart
      myChart.setOption(option);
  &lt;/script&gt;
  </code></pre>
  
  
  <p><a href="https://i.stack.imgur.com/r8HW5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r8HW5.jpg" alt="enter image description here" /></a></p>