Access specific points on the canvas and labels for styling

[claide]

Hi, Thanks for this great chartjs wrapper. I use this on one of my project but I got some trouble how to access a specific point inside the line chart canvas and apply some styles. I read the docs but can't find any good category where deep styling resides (for design sake).

Template
<d-chartrecord :chart-data="datacollection" v-bind:options="options" :height="200"></d-chartrecord>

Script

import { Line, mixins } from 'vue-chartjs';
  const { reactiveProp } = mixins;
  export default Line.extend({
    mixins : [reactiveProp],
    props: ['options'],
    mounted () {
      this.renderChart(this.chartData, this.options)
    }
  });

Component Script

import LineChart from './Chartrecord.vue';
export default {
  data() {
    return {
      datacollection: {},
      options: {
        responsive: true,
        legend: {
          display: false,
        },
        scales: {
          xAxes: [{
            gridLines: {
              display: true,
              color: '#D7D7D7'
            },
            ticks: {
              fontSize: 8
            }
          }],
          yAxes: [{
            display: false,
            ticks: {
              fontColor: 'transparent'
            },
            gridLines: {
              display: false,
            }
          }],
        }
      }
    }
  },
  mounted() {
    this.putData()
  },
  methods: {
    putData: function() {
      this.datacollection = {
        labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
        datasets: [{
          lineTension: 0,
          borderWidth: 1,
          borderColor: '#F2A727',
          pointBackgroundColor: '#F2A727',
          backgroundColor: 'transparent',
          data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
        }]
      }
    },
    getRandomInt: function() {
      return Math.floor(Math.random() * (30)) + 5
    }
  }
}

Maybe add some examples in the doc for styling and explanation?
Thanks! More power!

[apertureless]

Hey,

eh what exactly are you trying to do?

You have a callback for the tooltips where you can add custom content.

Besides you can simply pass the styling of for example the line with the given options: http://www.chartjs.org/docs/latest/configuration/elements.html#line-configuration

[claide]

Hey thanks for the response. Just ignore the tooltip. Sorry for not making my question clear. What I wanted to do is change the point style for eg. JUN data and the rest points data are at the same styles.

I tried to access the canvas but no luck.

[apertureless]

Okay, so you have a line chart. And you want now to group the point color of your data based on the label?

Like 'JAN' data is red, 'FEB' is green etc ?

You can pass an array for all the color values in chart.js

pointBackgroundColor:[ '#F2A727', '#F2A727', '#FB667C'],

Chart.js will then iterate over it .

[claide]

@apertureless , Thanks for that man!