Problem:
I'm trying to use the react-icons MdNavigation icon as a pointStyle within Chart.js. The app is built in Next.js. If it's not possible to use react-icons for a chart.js pointStyle, I'm open to using an imported SVG, jpg or png icon, but even still I'm having issues likely caused by my setup of the file-loader in next.config.js.
Expected result:
I expect for the MdNavigation icon (https://react-icons.github.io/react-icons/icons?name=md) to show up for the pointStyles.
Actual result:
I have tried a few different setups to get this to work, but so far none of them have given me to correct icon.
I've gotten the following error with a few different configurations:
Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
Config #1 to return the above error:
const arrow = new Image()
arrow.src = <MdNavigation/>
...
pointStyle: arrow,
I get the same error when I do the following setup:
const arrow = new Image()
arrow.src = MdNavigation
...
const mixedChartConfig = {
type: 'bar',
data: {
datasets: [
{
label: 'Wind Gust (m/s)',
data: state.data[0].data.hours
.slice(state.firstData, state.lastData)
.map(item => {
return item.gust.sg
}), // gust data here
type: 'line',
pointStyle: arrow,
radius: 15,
rotation: windDirectionArray
}
],
I've also tried the following setup in an attempt to create a wrapper for the MdNavigation icon:
const arrow = () => {
<div>
<MdNavigation/>
</div>
}
Ideally, I'd like to use that icon as the pointStyle. If that isn't possible, I'm open to using another jpg or png image, but I'm still having issues with that. The following code is my setup when I try to use a different image (likely caused by my file-loader setup. I'm not great with these config files yet). This setup also give me the following error:
Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
const arrow = new Image()
arrow.src = '../../public/arrow.jpg'
...
const mixedChartConfig = {
type: 'bar',
data: {
datasets: [
{
label: 'Wind Gust (m/s)',
data: state.data[0].data.hours
.slice(state.firstData, state.lastData)
.map(item => {
return item.gust.sg
}), // gust data here
type: 'line',
pointStyle: arrow,
radius: 15,
rotation: windDirectionArray
}
],
Loader config (next.config.js):
module.exports = {
webpack: (config, options) => {
config.module.rules.push({
test: [/\.svg$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
use: [
options.defaultLoaders.file-loader,
{
loader: 'file-loader',
options: pluginOptions.options,
},
],
})
return config
},
Also tried setting this up in webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
publicPath: (url, resourcePath, context) => {
// `resourcePath` is original absolute path to asset
// `context` is directory where stored asset (`rootContext`) or `context` option
// To get relative path you can use
// const relativePath = path.relative(context, resourcePath);
if (/my-custom-image\.png/.test(resourcePath)) {
return `other_public_path/${url}`
}
if (/images/.test(context)) {
return `image_output_path/${url}`
}
return `public_path/${url}`
}
}
}
]
}
}