title: How to customize border style on React Chart.js 2
body: <p>I am trying to add dashed border to my bar charts. I am following this example here- <a href="https://jsfiddle.net/jt100/ghksq1xv/3/" rel="nofollow noreferrer">https://jsfiddle.net/jt100/ghksq1xv/3/</a>
  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 </p>
  
  <p>This is what I have done 
  1) passed in 4 arguments: my chart instance, dataset, data and dash</p>
  
  <pre><code>```
  
  this.dashedBorder(myLineChart, 0, 2, [15, 10]);
  </code></pre>
  
  <p>2) This is my function.  </p>
  
  <pre><code>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,
     );
  };
  </code></pre>
  
  <p>}</p>
  
  <p>3) my whole react component. You can see what I have done here. </p>
  
  <pre><code>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 = () =&gt; {
      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 (
        &lt;div className={classes.graphContainer}&gt;
          &lt;canvas id="myChart" ref={this.chartRef} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  </code></pre>