Mastering Chart.js Customization: Tips, Tricks, and Best Practices

npm install chartjs-plugin-zoom

Then, integrate the zoom and pan functionality into your chart:

const config = {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [
      {
        label: 'Sales',
        data: [300, 400, 500, 600, 700],
        borderColor: 'rgba(75, 192, 192, 1)',
        fill: false,
      }
    ]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
      }
    },
    plugins: {
      zoom: {
        zoom: {
          enabled: true,
          mode: 'x', // allow zooming along the x-axis
        },
        pan: {
          enabled: true,
          mode: 'xy', // allow panning in both x and y directions
       },
      },
    },
  },
};

With this feature, users can zoom into specific areas of the chart and explore the data more thoroughly.

2. Tooltips customization

 Tooltips are crucial for providing detailed information when users hover over chart elements. Chart.js allows the customization of tooltips to display more contextual data or formatted values.

const config = {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [
      {
        label: 'Sales',
        data: [300, 400, 500, 600, 700],
        backgroundColor: 'rgba(153, 102, 255, 0.2)',
        borderColor: 'rgba(153, 102, 255, 1)',
        borderWidth: 1,
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {
            let value = context.raw;
            return `Sales: $${value.toFixed(2)}K`;
          },
        },
      },
    },
  },
};

This format ensures that your tooltips are tailored to present data in a user-friendly way, such as displaying currency, percentages, or even adding descriptions to data points.

3. Annotations

Annotations, such as lines or boxes highlighting key events or thresholds, add context to your charts. The chartjs-plugin-annotation plugin helps to implement these visual aids.

First, install the annotation plugin:

npm install chartjs-plugin-annotation

Next, customize the chart by adding an annotation:

const config = {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [
      {
        label: 'Sales',
        data: [300, 400, 500, 600, 700],
        borderColor: 'rgba(54, 162, 235, 1)',
        fill: false,
      }
    ]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
      }
    },
    plugins: {
      annotation: {
        annotations: {
          line1: {
            type: 'line',
            yMin: 500, // Threshold value
            yMax: 500,
            borderColor: 'red',
            borderWidth: 2,
            label: {
              content: 'Target Sales',
              enabled: true,
              position: 'center',
            },
          },
        },
      },
    },
  },
};

 

Annotations are helpful for marking important milestones, such as sales targets or event dates, making your charts more informative and visually engaging.

4. Stacked charts with multiple Axis:

To create a stacked chart with multiple axis in Chart.js, you can use the scales property to define multiple axis and the stacked option to enable stacking. Below is an example of how to set this up:

const config = {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [
      {
        label: 'Dataset 1',
        data: [65, 59, 80, 81, 56],
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
        yAxisID: 'y-axis-1',
        stack: 'Stack 1',
},
      {
        label: 'Dataset 2',
        data: [28, 48, 40, 19, 86],
        backgroundColor: 'rgba(255, 159, 64, 0.2)',
        borderColor: 'rgba(255, 159, 64, 1)',
        yAxisID: 'y-axis-2',
        stack: 'Stack 2',
      }
    ]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
        stacked: true
      },
      'y-axis-1': {
        type: 'linear',
        position: 'left',
        stacked: true
      },
      'y-axis-2': {
        type: 'linear',
        position: 'right',
        stacked: true,
        grid: {
          drawOnChartArea: false
        }
      }
    }
  }
};

5. Wheel click integration:

By default, Chart.js does not provide a built-in event for handling mouse wheel clicks. However, you can implement this feature by leveraging React’s DOM event handling capabilities. Using the onWheel or onClick events in React, you can detect wheel clicks and integrate them with Chart.js actions through a chart reference.

For example, you can add an event listener to the chart container and use the chart reference to reset zoom or perform any custom action:

import React, { useEffect, useRef } from 'react';
import { CChart } from '@coreui/react-chartjs';
 
const ChartWithWheelClick = () => {
  const chartRef = useRef(null);
 
  useEffect(() => {
    const handleWheelClick = (event) => {
      if (event.button === 1) { // Detect middle mouse button (wheel click)
        chartRef.current.resetZoom(); // Example action on wheel click
      }
    };
 
    const chartContainer = chartRef.current?.canvas?.parentNode;
    
    // Register the event listener
    if (chartContainer) {
      chartContainer.addEventListener('mousedown', handleWheelClick);
    }
 
    // Cleanup event listener on unmount
    return () => {
      if (chartContainer) {
        chartContainer.removeEventListener('mousedown', handleWheelClick);
      }
    };
  }, []);
 
  const chartData = {
    // Your chart data here
  };
 
  return (
    <CChart type="bar" ref={chartRef} data={chartData} />
  );
};
export default ChartWithWheelClick;

 

In this example, chartRef holds the reference to the Chart.js instance, and the middle mouse click triggers a zoom reset. You can customize this further based on your specific use case.

6. Shading specific areas on the canvas

Customizing the appearance of specific blocks or areas in your Chart.js canvas can be achieved by drawing directly on the canvas using Chart.js’s beforeDraw hook. This allows you to highlight or shade certain sections, enhancing the visual impact of the chart.

Below is an example where we shade a specific area on the chart, such as a block between certain X-axis or Y-axis values:

import React, { useRef, useEffect } from 'react';
import { CChart } from '@coreui/react-chartjs';
import { Chart } from 'chart.js';
 
const ChartWithShadedBlock = () => {
  const chartRef = useRef(null);
 
  useEffect(() => {
    const chart = chartRef.current;
 
    // Custom plugin to shade an area
    const shadingPlugin = {
      id: 'shadingPlugin',
      beforeDraw: (chart) => {
        const ctx = chart.ctx;
        const xAxis = chart.scales['x-axis-0'];
        const yAxis = chart.scales['y-axis-0'];
 
        // Define the block to shade (for example between two X-axis values)
        const startX = xAxis.getPixelForValue(2); // Example start X value
        const endX = xAxis.getPixelForValue(4);   // Example end X value
        const startY = yAxis.getPixelForValue(50); // Example Y value (bottom)
        const endY = yAxis.getPixelForValue(100); // Example Y value (top)
 
        ctx.save();
        ctx.fillStyle = 'rgba(0, 100, 255, 0.3)'; // Color with transparency
        ctx.fillRect(startX, endY, endX - startX, startY - endY);
        ctx.restore();
      }
    };
 
    // Register the shading plugin
    Chart.register(shadingPlugin);
 
    // Cleanup on unmount
    return () => {
      Chart.unregister(shadingPlugin);
    };
  }, []);
 
  const chartData = {
    // Your chart data here
  };
 
  return (
    <CChart
      type="bar"
      ref={chartRef}
      data={chartData}
      options={{
        plugins: {
          shadingPlugin: true // Enable shading plugin
        }
      }}
    />
  );
};
 
export default ChartWithShadedBlock;

7. Customizing Y-axis labels with suffixes (K, Mn, Bn)

Chart.js made it feasible for the user to format the axis labels. This includes the option to add custom suffixes for large numbers. For example, for the y-axis label where we have numbers, there we can append “K” for thousands, “Mn” for millions, or “Bn” for billions to improve readability of the values.The following is an example of how to implement this using the callbacks option inside the chart configuration:

import React, { useRef } from 'react';
import { CChart } from '@coreui/react-chartjs';
 
const ChartWithYAxisSuffix = () => {
  const chartRef = useRef(null);
 
  const chartData = {
    labels: ['Jan', 'Feb, 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
    datasets: [
      {
        label: 'Revenue',
        backgroundColor: '#36A2EB',
        data: [1000, 2500000, 45000000, 700000000, 10000, 1200000000, 650000]
      }
    ]
  };
 
  const yAxisSuffixCallback = (value) => {
    if (value >= 1e9) return (value / 1e9).toFixed(1) + 'Bn'; // For billions
    if (value >= 1e6) return (value / 1e6).toFixed(1) + 'Mn'; // For millions
    if (value >= 1e3) return (value / 1e3).toFixed(1) + 'K';  // For thousands
    return value; // For smaller values
  };
 
  return (
    <CChart
      type="bar"
      ref={chartRef}
      data={chartData}
 options={{
        scales: {
          y: {
            ticks: {
              callback: yAxisSuffixCallback
            }
          }
        }
      }}
    />
  );
};
 
export default ChartWithYAxisSuffix;

By using this approach, you can improve the readability of large numbers on the Y-axis of your chart. This formatting is dynamic and automatically adjusts based on the value range of your data.

8. Adding hover event to X-axis and Y-axis labels

As chart.js by default does provide the hover event but it works on just chart canvas and not on the either of labels of x-axis and y-axis. So to achieve this we will be using chart’s reference and then integrate our custom function to the chart through that reference.

const Charts = (props) => {
    const chartRef = useRef(null);
    

    
    useEffect(() => {
        


            const chartInstance = chartRef.current;

           if (chartInstance) {
                
                const handleMouseMove = (event) => {
                    if (!chartInstance) return;

                    const { offsetX, offsetY } = event;
                    const xScale = chartInstance.scales.x;
                    const yScale = chartInstance.scales.y;

                    

                    if (offsetY > yScale.bottom && offsetY < yScale.bottom + 20) {
                        // setHoverLabel(xLabel);
                        console.log('HOVERED X');
                        chartInstance.options.plugins.zoom.zoom.mode = 'x';
                    } else if (offsetX < xScale.left && offsetX > xScale.left - 40) {
                        // setHoverLabel('');
                        console.log('HOVERED Y');
                        chartInstance.options.plugins.zoom.zoom.mode = 'y';
                    } else {
                        console.log('NOT');
                        chartInstance.options.plugins.zoom.zoom.mode = 'xy';
                    }
                };

                // Get the chart canvas element
                const chartCanvas = chartInstance.canvas;

                // Add mousemove event listener to the canvas
                chartCanvas.addEventListener('mousemove', handleMouseMove);

                // Cleanup the event listener on component unmount
               return () => {
                    chartCanvas.removeEventListener('mousemove', handleMouseMove);
                };
            }
        }
    }, []);

    var indexArr = [];

    return (
        <>
            

            <Chart
                ref={(el) => (chartsRef.current[grp] = el)}
                style={{ height: '300px', position: 'relative' }}
                data=
                {{
                    labels: xlabel,
                    datasets: datasetValue
                }}

                options={{}}
                
            
            />

        </>

    )
}



export default Charts

Implementing the above best practices for Chart.js customization ensures that your charts are not only visually appealing but also highly functional and user-friendly. By following these essential Chart.js configuration options, plugins and react events you can enhance the functionality and appearance of your charts, making them more interactive and tailored to your specific project needs.