google chart - my performance skill 2021

skill_bar_chart.js

      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['스킬', '현재', '목표'],
          ['리액트', 4, 5],
          ['JS', 2, 4],
          ['TS', 4, 5],
          ['자료구조', 0.5, 3],
          ['네트워크', 2, 5],
          ['커뮤니케이션', 2, 3],
          ['일정산출', 1, 5],
          ['감정조절', 4, 4],
          ['독서', 5, 5],
          ['기록, 문서화', 5, 5],
          ['신규 리서치', 3, 4],
          ['피드백 수용', 5, 5],
          ['피드백하기', 3, 5],
          ['업계 동향 파악', 3, 4],
          ['유머감각', 1.5, 2],
        ]);

        var options = {
          chart: {
            title: 'My Performance Skill',
            subtitle: 'score of each skill',
          },
          bars: 'vertical', // Required for Material Bar Charts.
          hAxis: {format: 'decimal'},
          height: 400,
          width: 1200,
          colors: ['#1FF185', '#1F52F1']
        };

        var chart = new google.charts.Bar(document.getElementById('chart_div'));

        chart.draw(data, google.charts.Bar.convertOptions(options));

        var btns = document.getElementById('btn-group');

        btns.onclick = function (e) {

          if (e.target.tagName === 'BUTTON') {
            options.hAxis.format = e.target.id === 'none' ? '' : e.target.id;
            chart.draw(data, google.charts.Bar.convertOptions(options));
          }
        }
      }



// https://developers.google.com/chart/interactive/docs/gallery/barchart#creating-material-bar-charts
// https://htmlcolorcodes.com/