Kodjo
Posts: 5
Joined: Thu Oct 21, 2021 3:23 am

Align bars to Yaxis labels

I have the bars in my chart for reason I dont know not aligned with the labels as you can see in the image below.
Is there a way to align them ?
Sorry I dont have a reproducible example of code to show this.

https://drive.google.com/file/d/1gwZ4wv ... sp=sharing
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Align bars to Yaxis labels

Hi Kodjo,

Welcome to our forum and thanks for contacting us with your question!

Unfortunately in this case it is not possible to tell what is the cause of the point misplacement only by looking at your shared image. Reproduction of that issue is required in this case or at least I need you to provide me with config of your chart.

Best regards!
Mateusz Bernacik
Highcharts Developer
Kodjo
Posts: 5
Joined: Thu Oct 21, 2021 3:23 am

Re: Align bars to Yaxis labels

Thanks @mateusz.b for quick answer.
Please see below my Highcharts react code.
I am using:
react v16.0.0,
highcharts-react-official v3.0.0,
highchartsReact v9.0.1

Code: Select all

import React ,{useState} from 'react'
import HighchartsReact from "highcharts-react-official";
import Highcharts from "highcharts/highcharts-gantt";
import HighchartMore from "highcharts/highcharts-more";


var dateFormat = Highcharts.dateFormat,
  defined = Highcharts.defined;


HighchartMore(Highcharts);

var customPointFormatter = function () {
var point = this,
            format = '%e. %b',
            options = point.options,lines;

        lines = [{
            value: point.name,
            style: 'font-weight: bold;'
        }, {
            title: 'Start',
            value: dateFormat(format, point.start)
        }, {
            visible: !options.milestone,
            title: 'End',
            value: dateFormat(format, point.end)
        }, {
            title: 'Implementer',
            value: options.implementer || '-'
        }, {
            title: 'Reason for Revision',
            value: options['Reason for Revision'] || '-'
        }, {
            title: 'Specific Actions',
            value: options['Specific Actions'] || '-'
        }];

        return lines.reduce(function (str, line) {
            var s = '',
                style = (
                    defined(line.style) ? line.style : 'font-size: 0.8em;'
                );
            if (line.visible !== false) {
                s = (
                    '<span style="' + style + '">' +
                    (defined(line.title) ? line.title + ': ' : '') +
                    (defined(line.value) ? line.value : '') +
                    '</span><br/>'
                );
            }
            return str + s;
        }, '');
    }
    

export default function TimelineChart(props) {
    // Filter the data with dropdown output
    let localFilteredData =  props.seriesData.filter(l =>
        Object.entries(props.filters)
        .every(([k, v]) => !v.length || l[k] === v))


    const [chartOptions, setChart] = useState({
        chart: {
            backgroundColor: "transparent",
            height: 5*localFilteredData.length +'%'
        },
        navigator: {
        enabled: true,
        liveRedraw: true,
        height: 75,
        series: {
            type: 'gantt',

        }
        },
        rangeSelector: { enabled: true },
        scrollbar: { enabled: true, liveRedraw: true },
        plotOptions: {
            series: {
                pointWidth: 20
            }
        },
        series:  localFilteredData,
        tooltip: {
        pointFormatter: customPointFormatter
        
        },
        title: {
            text: ''
        },
        xAxis: {
                currentDateIndicator: true,
            },
        
        yAxis: {
            type: "treegrid",
            uniqueNames: true,
            // alternateGridColor: '#dfdfe047',
            tickColor: '#0000000',
            tickPixelInterval: 30,
            tickPosition: 'inside',
            gridLineColor:'#e9e9e9',
            grid: {
                enabled: true,
                borderColor: 'rgba(0,0,0,0.3)',
                borderWidth: .5,
                cellHeight: 120
            },
        },
        
    });
    return (
        <div>
            <HighchartsReact
                constructorType="ganttChart"
                highcharts={Highcharts}
                options={chartOptions}
                immutable={true} 
                allowChartUpdate="true"
                callback= {chart => setChart}
            />
        </div>
    )
}
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Align bars to Yaxis labels

Hi Kodjo,

Thanks for sharing that code.

Frankly speaking I highly doubt that this issue is related to Highcharts React wrapper. I've created a chart based on you shared code (thanks), but I wasn't able to reproduce the issue.
Demo: https://jsfiddle.net/BlackLabel/uson4e82/
The only unusual thing that I have noticed is that you used uniqueNames with type: "treegrid". According to API, that property should only be used with type: "category". Please try to remove uniqueNames option and let me know if that helped.
If not I will need you to provide me with reproduction of that issue in a form of a working demo, similar to the one that I have shared.

Let me know if were able to solve the issue.
Best regards!
Mateusz Bernacik
Highcharts Developer
rajusamala
Posts: 1
Joined: Tue Oct 26, 2021 5:02 pm

Re: Align bars to Yaxis labels

Hello,

https://jsfiddle.net/raju_samala/nh2jpyek/

this charet should render like this, but not working. please help


Image
Attachments
Screenshot 2021-10-26 at 22.29.11.png
Screenshot 2021-10-26 at 22.29.11.png (43.73 KiB) Viewed 1632 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Align bars to Yaxis labels

Hello rajusamala,

Welcome to our forum and thanks for contacting us with your question!

Two issues here:
- For such patterns pattern-fill.js module is required,
- There's something wrong with your imported Highcharts lib. It seems like its your own CDN and I think you might have made some changes, check your errors in the console.

Working demo: https://jsfiddle.net/BlackLabel/e1ougrsq/

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer
AkshayChechare
Posts: 1
Joined: Wed Feb 02, 2022 5:54 am

Re: Align bars to Yaxis labels

Hi, I'm new to highcharts can anyone tell me how to implement gantt in react
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Align bars to Yaxis labels

Hi AkshayChechare,

Welcome to our forum and thanks for contacting us with your question!

Here you can find a live demo with an example of Gantt in React:
https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

Feel free to ask any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Gantt”