Search code examples
javascriptreactjshighchartscolumn-chart

React: How to make different border-radius for each point in Highcharts column chart?

Lets start from the end, I want to make my column chart look like this: enter image description here

This is very easy to make using chart.js Credit: https://devsheet.com/code-snippet/bar-chart-with-circular-shape-from-corner-in-chartjs/

I read already this question: Highcharts: is it possible to set up top border radius for the columns in Column chart? That suggest to use the package: "highcharts-border-radius". But this package can make round corners but it will be hardcoded, for example i changed topLeft and topRight corners to have border-radius, then when i will have negative values, it will looks horrible: enter image description here

I find a solution in pure javascript: http://jsfiddle.net/BlackLabel/vd2Ly9eh/

$(function() {
  Highcharts.wrap(Highcharts.seriesTypes.column.prototype, 'translate', function(proceed) {
    proceed.apply(this, [].slice.call(arguments, 1));
    var series = this,
      cpw = 0.166,
      shapeArgs,
      x, y, h, w;

    Highcharts.each(series.points, function(point) {
      shapeArgs = point.shapeArgs;
      x = shapeArgs.x;
      y = shapeArgs.y;
      h = shapeArgs.height;
      w = shapeArgs.width;

      point.shapeType = 'path';
      if (point.negative) {
        point.shapeArgs = {
          d: [
            'M', x, y,
            'L', x, y + h - w / 2,
            'C', x, y + h + w / 5, x + w, y + h + w / 5, x + w, y + h - w / 2, 'L', x + w, y,
            'L', x, y
          ]
        };
      } else {
        point.shapeArgs = {
          d: [
            'M', x, y + w / 2,
            'L', x, y + h,
            'L', x + w, y + h,
            'L', x + w, y + w / 2,
            'C', x + w, y - w / 5, x, y - w / 5, x, y + w / 2
          ]
        };
      }
    });
  });


  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    series: [{
      data: [2, 3, -2, 3, 2]
    }]
  });
});

But I can't figure out how to solve this problem in React. So I would like to get help how to make such Column chart with Highcharts in React.

Thanks in advance

Solution

  • You can add the wrap for column series in React almost in the same way as in pure JS:

    // Import Highcharts
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

Highcharts.wrap(Highcharts.seriesTypes.column.prototype, "translate", function (
  proceed
) {
  ...
});

    Live demo: https://codesandbox.io/s/highcharts-react-demo-ct4d6m?file=/demo.jsx

    Docs: https://www.npmjs.com/package/highcharts-react-official