Chartjs-Laravel 8 ConsoleTvs / Charts 7 Implementing Chartjs Options

by

1👍

✅

Instead of using the options hook, you defined options as a property. You should use .options({ ... }) but not options: { ... }.

The options hook however doesn’t work for me, maybe I use an outdated Chartisan library. According to Custom Hooks, you can also merge the options to the chart as follows:

.custom(function({ data, merge }) {
   return merge(data, {
     options: {
       ...
     }
   }),
})

Please take a look at your amended and runnable code below and see how it works with the merge function.

const chart = new Chartisan({
  el: '#test_chart',
  data: {
    "chart": {
      "labels": ["First", "Second", "Third"]
    },
    "datasets": [{
        "name": "Sample 1",
        "values": [10, 3, 7]
      },
      {
        "name": "Sample 2",
        "values": [1, 6, 2]
      }
    ]
  },
  hooks: new ChartisanHooks()
    .colors()
    .datasets(
      [{
          type: 'line',
          fill: false,
          borderColor: '#329865',
          backgroundColor: '#329865'
        },
        {
          type: 'line',
          fill: false,
          borderColor: '#1e5b3c',
          backgroundColor: '#1e5b3c'
        }
      ]
    )
    .custom(function({ data, merge }) {
      return merge(data, {
        options: {
          layout: {
            padding: {
              left: 0,
              right: 0,
              top: 50,
              bottom: 0
            },
          },
          aspectRatio: 1,
          maintainAspectRatio: false,
          responsive: true,
          legend: {
            display: true,
            position: 'top',
            labels: {
              usePointStyle: true,
              fontSize: 12,
            },
          },
          elements: {
            point: {
              pointStyle: 'circle',
            }
          },
          scales: {
            xAxes: [{
              maxBarThickness: 120,
              scaleLabel: {
                display: true,
                labelString: "xAxes_label"
              },
              gridLines: {
                display: false
              },
              ticks: {
                fontSize: 10,
                maxRotation: 80,
                minRotation: 80,
                padding: 2
              },
            }],
            yAxes: [{
              scaleLabel: {
                display: true,
                labelString: "yAxes_label"
              },
              gridLines: {
                display: false,
                drawBorder: false
              },
              ticks: {
                display: true,
                fontSize: 10,
                suggestedMin: 0
              },
            }],
          },
          plugins: {
            datalabels: {
              color: '#ff0a6c',
              labels: {
                title: {
                  font: {
                    weight: 'bold',
                    size: 11,
                  }
                },
                value: {
                  color: 'green'
                }
              },
              formatter: function(value, context) {
                return (value != '' && value !== undefined) ? Math.round(value * 100) / 100 : value;
              },
              anchor: 'end',
              align: 'start',
              display: 'auto',
              clamp: false
            }
          }
        }
      });
    }),
});
<script src="https://unpkg.com/chart.js@2.9.4/dist/Chart.min.js"></script>
<script src="https://unpkg.com/@chartisan/chartjs@^2.1.0/dist/chartisan_chartjs.umd.js"></script>
<div id="test_chart" style="height: 300px;"></div>

Leave a comment