How to make rounded corner stripes in Google charts

I have the following diagram with square columns

enter image description here

I want him to make rounded corner bars with google charts as pic below

enter image description here

+4
source share
1 answer

no standard configuration options to change column shape

but you can directly change svg when a 'ready'chart event occurs

however, the chart will return to its original form, in any other event

therefore it is necessary to change, at any time when the event is running
-> 'ready', 'select', 'onmouseover','onmouseout'

rect, rx ry

, rect,
colors
fill, , colors

rect fill 'none',
rect, 'onmouseover'

rect stroke '#ffffff',

, svg, , colors ,
colors

. ...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Month', '2015', '2016'],
      ['Jan', 10, 15],
      ['Feb', 12, 18],
      ['Mar', 14, 21],
      ['Apr', 16, 24]
    ]);

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.ColumnChart(container);

    var colors = ['#cd6155', '#5499c7'];

    google.visualization.events.addListener(chart, 'ready', changeBorderRadius);
    google.visualization.events.addListener(chart, 'select', changeBorderRadius);
    google.visualization.events.addListener(chart, 'onmouseover', changeBorderRadius);
    google.visualization.events.addListener(chart, 'onmouseout', changeBorderRadius);

    function changeBorderRadius() {
      chartColumns = container.getElementsByTagName('rect');
      Array.prototype.forEach.call(chartColumns, function(column) {
        if ((colors.indexOf(column.getAttribute('fill')) > -1) ||
            (column.getAttribute('fill') === 'none') ||
            (column.getAttribute('stroke') === '#ffffff')) {
          column.setAttribute('rx', 20);
          column.setAttribute('ry', 20);
        }
      });
    }

    chart.draw(data, {
      colors: colors
    });
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Hide result
+3
source

Source: https://habr.com/ru/post/1649893/


All Articles