How to customize border style on React Chart.js 2

Question

I am trying to add dashed border to my bar charts. I am following this example here- https://jsfiddle.net/jt100/ghksq1xv/3/ I am not getting much luck I have followed the instruction very carefully and passing in the correct values but I am not adding the dashed border to my bar chart. Any help will be very much appreciated

This is what I have done 1) passed in 4 arguments: my chart instance, dataset, data and dash

```

this.dashedBorder(myLineChart, 0, 2, [15, 10]);

2) This is my function.

dashedBorder(chart, dataset, data, dash) {

chart.config.data.datasets[dataset]._meta[0].data[data].draw = function() {
  chart.chart.ctx.setLineDash(dash);

  Chart.elements.Rectangle.prototype.draw.apply(this,
    arguments,
   );
};

}

3) my whole react component. You can see what I have done here.

import React, { PureComponent } from "react";
import classes from "./YourLineGraph.module.css";
import Chart from "chart.js";

let myLineChart;
let myChartRef;
let ctx;

//--Chart Style Options--//
// Chart.defaults.global.defaultFontFamily = "'PT Sans', sans-serif";
Chart.defaults.global.defaultFontFamily = "'Cooper Hewitt'";
Chart.defaults.global.legend.display = false;
Chart.defaults.global.elements.line.tension = 0;
Chart.defaults.global.scaleLineColor = "tranparent";
Chart.defaults.global.tooltipenabled = false;

//--Chart Style Options--//

export default class YourLineGraph extends PureComponent {
  chartRef = React.createRef();

  componentDidMount() {
    this.buildChart();
  }

  componentDidUpdate() {
    this.buildChart();
  }

  buildChart = () => {
    myChartRef = this.chartRef.current.getContext("2d");
    ctx = document.getElementById("myChart").getContext("2d");

    const { data, average, labels, attribute } = this.props;

    if (typeof myLineChart !== "undefined") myLineChart.destroy();

    myLineChart = new Chart(myChartRef, {
      type: "bar",
      data: {
        //Bring in data
        labels:
          labels.length === data.length
            ? labels
            : new Array(data.length).fill("Data"),
        datasets: [
          {
            label: "Sales",
            data: data,
            borderColor: "#98B9AB",
            borderWidth: 3,
            borderStyle: "dash" //has no effect
          }
        ]
      },

      options: {
        plugins: {
          datalabels: {
            formatter: function(value, context) {
              return attribute === "pounds" ? `£ ${value}` : value;
            },
            anchor: "end",
            align: "end",
            color: "#888"
          }
        },
        scales: {
          yAxes: [
            {
              gridLines: {
                drawBorder: false,
                display: false
              },
              ticks: {
                display: false //this will remove only the label
              }
            }
          ],
          xAxes: [
            {
              gridLines: {
                drawBorder: false,
                display: false
              },
              ticks: {
                display: false //this will remove only the label
              }
            }
          ]
        }
      }
    });

    this.dashedBorder(myLineChart, 0, 2, [15, 10]);
  };

  dashedBorder(chart, dataset, data, dash) {
    chart.config.data.datasets[dataset]._meta[0].data[data].draw = function() {
      chart.chart.ctx.setLineDash(dash);

      Chart.elements.Rectangle.prototype.draw.apply(this, arguments);
      chart.chart.ctx.setLineDash([1, 0]);
    };
  }

  render() {
    return (
      <div className={classes.graphContainer}>
        <canvas id="myChart" ref={this.chartRef} />
      </div>
    );
  }
}

How to customize border style on React Chart.js 2

0 Answers0