Add Support for Independent Axis Label Styling in @nivo/heatmap via theme.axis Configuration

[Crispy-rw]

Is your feature request related to a problem? Please describe.
I’m always frustrated when I can’t independently style the axis labels in @nivo/heatmap. Currently, there is no straightforward way to apply different styles (e.g., font size, font family, color) to the labels on the bottom axis versus the labels on the left axis. This limitation makes it difficult to achieve specific design requirements where different axes need distinct styling.

Describe the solution you’d like
I would like the ability to independently style the axis labels for different axes within the theme prop. For example, it would be great if we could use properties like theme.axis.bottom, theme.axis.left, theme.axis.top, and theme.axis.right to apply specific styles to each axis separately. This could include properties such as fontSize, fontFamily, color, and other text-related styles.

theme={{
    axis: {
        bottom: {
                text: {
                    fontSize: 12,
                    fontFamily: 'Arial, sans-serif',
                    fill: '#333',
                },
        },
        left: {
                text: {
                    fontSize: 16,
                    fontFamily: 'Courier New, Courier, monospace',
                    fill: '#000',
                },
        },
        // Additional styling for top and right axes
    },
}

Describe alternatives you’ve considered
I’ve considered using custom CSS selectors to target specific text elements, but this approach is brittle and can break if the internal structure of the SVG changes.

Additional context
Independent axis label styling would significantly enhance the flexibility and usability of the @nivo/heatmap component, allowing for more sophisticated and customized visualizations. This feature is especially important for dashboards or reports where different data dimensions need to be visually distinct.