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

Align bars to Yaxis labels

Thu Oct 21, 2021 3:31 am

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: 797
Joined: Tue Jul 13, 2021 11:34 am

Re: Align bars to Yaxis labels

Thu Oct 21, 2021 6:37 am

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!

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

Re: Align bars to Yaxis labels

Thu Oct 21, 2021 7:25 am

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: 797
Joined: Tue Jul 13, 2021 11:34 am

Re: Align bars to Yaxis labels

Fri Oct 22, 2021 2:09 pm

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!

rajusamala
Posts: 1
Joined: Tue Oct 26, 2021 5:02 pm

Re: Align bars to Yaxis labels

Tue Oct 26, 2021 5:08 pm

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 184 times

mateusz.b
Posts: 797
Joined: Tue Jul 13, 2021 11:34 am

Re: Align bars to Yaxis labels

Thu Oct 28, 2021 9:22 am

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!

Return to “Highcharts Gantt”