Meteogram in chartjs

[Thevyn]

Hi!

Working on creating a Meteogram and wondering if something like this is possible to make in ChartJS.

[etimberg]

It would probably be possible to do this using a line chart and then supplying different images for the data points. The pointStyle can then be an image. docs

I think you'd need to set pointStyle to be a function so that you can return a different image for each point. Something like

const image = new Image()

const dataset: ChartDataset<'line'> = {
    pointStyle: (ctx: ScriptableContext<'line'>) => {
        // Change return based on data in ctx
        return image
    }
}

[Thevyn]

Will look into it! What about gridlines to separate each day? Also possible?

[etimberg]

It might be possible using the options that control tick marks

[Udemology]

@Thevyn Just out of curiosity. Were you able to achieve the upper scale section? I have been trying myself and I could not figure it out with the control tick marks. The text does not want to merge and my only solution was to build a plugin to draw the scale text with the bolded section between "Thu Oct 18".

I made a video about the steps here: https://youtu.be/0ItyRXKzHC8

I am certain I am missing something.

[madhuri2777]

Hi @etimberg , we can return an image by supplying different photo for the data points as you mentioned. But this will happen only when you hover(tooltip element) on it right? What if we want to show all data points' images at once, is it feasible?