CODEWITHSUNDEEP
javascriptchart.js
Jameu Lukasli1
Jameu Lukasli1

Reputation: 517

Is it possible to make points in a line chart of Chart JS 3.7.0 look like a donut?

the version of Chart JS is 3.7.0

I am looking for a way to make my chart's points look from this:

enter image description here

to something like this:

enter image description here

I found out that there is an option in this library where you can set the points to a certain shape. e.x: pointStyle: 'rectRot' will make the points appearance look like this:

enter image description here

Is there an option or a way to achieve what Im looking for? (Check the second picture).

Thanks in advance!

My chart's javascript:

const data = {
  datasets: [
    {
      backgroundColor: 'black',
      borderColor: '#2d84b4',
      borderWidth: 2,
      data: [
        { x: 'Dec 27', y: 0.204 },
        { x: '01:00', y: 0.234 },
        { x: '02:00', y: 0.274 },
        { x: '03:00', y: 0.234 },
        { x: '04:00', y: 0.304 },
        { x: 'Dec 28', y: 0.506 },
      ],
      fill: false,
      pointBorderColor: 'rgba(0, 0, 0, 0)',
      pointBackgroundColor: 'rgba(0, 0, 0, 0)',
      pointHoverBackgroundColor: '#2d84b4',
      pointHoverBorderColor: '#2d84b4',
    },
  ],
};

const config = {
  type: 'line',
  data: data,
  options: {
    animation: {
      duration: 0,
    },
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      //Do not display legend.
      legend: {
        display: false,
      },
    },
    scales: {
      xAxes: {
        stacked: true,
        ticks: {
          stepSize: 2,
        },
        grid: {
          display: true,
          drawBorder: false,
          drawOnChartArea: false,
          drawTicks: true,
          tickLength: 4,
          type: 'time',
        },
      },
      yAxes: {
        grid: {
          drawBorder: false,
          drawTicks: false,
        },
      },
    },
    elements: {
      point: {
        radius: 5,
      },
    },
  },
};

// Initialize the Chart.
const myChart = new Chart(document.getElementById('myChart'), config);
window.addEventListener('beforeprint', () => {
  myChart.resize(600, 600);
});
window.addEventListener('afterprint', () => {
  myChart.resize();
});

//Disable all animations!
myChart.options.animation = false;
myChart.options.animations.colors = false;
myChart.options.animations.x = false;
myChart.options.transitions.active.animation.duration = 0;

Upvotes: 2

Views: 563

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31431

The points seemed to work just fine with your transparent background, only on hover you setted a normal background again so the pointHoverBackgroundColor should also be transparent.

To make the point bigger on hover you can use the hoverRadius and to make the line have the same width you can use the pointHoverBorderWidth:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'black',
      borderColor: '#2d84b4',
      borderWidth: 2,
      pointBackgroundColor: 'rgba(0, 0, 0, 0)',
      pointHoverBackgroundColor: 'rgba(0, 0, 0, 0)',
      pointHoverBorderColor: '#2d84b4',
      hoverRadius: 10,
      pointHoverBorderWidth: 2
    }]
  },
  options: {}
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>

Upvotes: 3

Related Questions