How do I outline the bars of my barchart with a thick black outline?

user_12003667 0
Viewed 290

I am new to coding and am trying to make a barchart with eCharts. I have made a simple bar chart example but now I want to make a thick outline for the bars on the chart. This is my code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts-en.min.js"></script>
</head>
<body>
    <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: 'ECharts entry example'
            },
            tooltip: {},
            legend: {
                data:['Sales']
            },
            xAxis: {
                data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
            },
            yAxis: {},
            series: [{
                name: 'Sales',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
            }]
        };

        // use configuration item and data specified to show chart
        myChart.setOption(option);
    </script>
</body>
</html>

How do I add a thick black outline on the bars?

echarts javascript
1 Answers

You can use the option barBorderColor and barBorderWidth to set the color and width of the border respectively for each bar. Below is an example based on your existing code.

var myChart = echarts.init(document.getElementById('main'));

// specify chart configuration item and data
var option = {
  title: {
    text: 'ECharts entry example'
  },
  tooltip: {},
  legend: {
    data: ['Sales']
  },
  xAxis: {
    data: ["shirt", "cardign", "chiffon shirt", "pants", "heels", "socks"]
  },
  yAxis: {},
  series: [{
    name: 'Sales',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20],
    //Added item style
    itemStyle: {
      normal: {
        barBorderWidth: 5,
        barBorderColor: "#000"
      }
    }
  }]
};

// use configuration item and data specified to show chart
myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts-en.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

user_43502750
Related