search

highcharts / highcharts-vue

Other
686 stars 150 forks source link

Query: Display days and month headings in Gantt style chart #254

Closed philipbelcher closed 11 months ago

philipbelcher commented 11 months ago

Hi guys.

I've got a Gantt style chart that displays a series of days and their dates along the xAxis. I'm wondering if there's a way I can go about adding the month above those days so it looks similar to this mockup (I've added the months in red text) Group

I'm currently overriding the day formatter using the following code, but obviously if I add the month into there, it's repeated for each day:

dateTimeLabelFormats: {
    day: '%e<br><span style="opacity: 0.5; font-size: 0.7em">%a</span>',
},

Thanks in advance!

jszuminski commented 11 months ago

Hi, thanks for the question!

You can achieve this with the SVGRenderer which helps you render custom SVGElements on the chart. Here's a super simple demo: https://jsfiddle.net/cmq4h910/ which should give you a brief idea of how it could work. If you're okay with this approach, I can guide you through it and give you some more tips how to implement that.

Alternatively, you could try modifying the dateTimeLabelFormat property and styling the top element of the xAxis table with CSS and SVG attributes so that it fits your designs.

This is not really related to the highcharts-vue integration, but more to the Highcharts Gantt behavior so I'm closing this issue here, but feel free to ask in case you have any questions.