CODEWITHSUNDEEP
javascriptchartsecharts
petworthnick
petworthnick

Reputation: 215

How do I set an echarts boxplot x-axis label?

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']

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>eCHarts</title>
<!-- including ECharts file -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>

</head>

<body>

<!-- preparing a DOM with width and height for ECharts -->
<div id="main" style="width:600px; height:400px;"></div>
<script type="text/javascript">
    // 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);
</script>

enter image description here

Upvotes: 1

Views: 2757

Answers (2)

Ken Lin
Ken Lin

Reputation: 1919

Adding a little bit more detail to @Ginger_Chacha's answer ...

Replace

itemNameFormatter: 'Option {value}'

with

itemNameFormatter: function (params) {
    return mylabels[params.value];
}

where option can access

const mylabels = ['PTM 07', 'PTM 08', 'PTM 09', 'PTM 10', 'PTM 11'];

Upvotes: 0

Ginger_Chacha
Ginger_Chacha

Reputation: 347

replace

itemNameFormatter: 'Option {value}' }

to

itemNameFormatter: function (params) {
            return scopes[params.value];
    }

where the params.value will be 0,1,2,3... the key is this is a function you can return whatever you like...

Upvotes: 2

Related Questions