Home forums Chart Support xAxis labels out of place

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #30696

    I have a strange behavior. the chart (line) is displayed all well, but the X axis labels (dates or time and date) are displayed on the left of the tick and not below it as it should be. I have tried all possible settings, but nothing helps. the tick is displayed in the right location, and the box of the label (colored in red) is displayed in the right location but the content of the label is on the left side. this is the settings for the X axis:

    axisX: {
             interval: 3600 * 3,
             gridColor: 'lightgrey',
             tickColor: 'lightgrey',
             labelFormatter: e => {
                  if(e.chart.axisX[0].dataInfo.max - e.chart.axisX[0].dataInfo.min > (86400000 * 5))
                                    return moment(e.value).format('D.M');
                                else
                                    return moment(e.value).format('HH:mm D.M');
             },
             crosshair: {
                 enabled: true,
                 color: '#244D85',
                 snapToDataPoint: false,
                 label: ''
             },
             lineColor: 'transparent',
             labelFontSize: 15,
             labelAngle: 0,
             margin: 10,
             labelBackgroundColor: '#942626',
             labelAutoFit:true,
             labelWrap: true,
        }

    I have deliberately set the label background to red , so it will be more visible (the problem). Image is attached to show the problem. Please help, I’m out of ideas.
    chart

    #30704

    @vladkatz,

    axisX labels and labelBackgroundColor seems to be working fine. Can you kindly create JSFiddle reproducing the issue you are facing along with sample data and share it with us so that we can look into the code / chart-options being used, run it at our end to understand the use-case better and help you out?


    Manoj Mohan
    Team CanvasJS

    #30726

    axisX labels is not working fine since it’s supposed to be inside the background.
    I have found the problem. seems that you have slight problems when working with direction rtl (on body tag).
    Once i specified the chart container to be ltr everything started working normally.

    #30802

    @vladkatz,

    It seems to be working fine. Please take a look at this JSFiddle.

    If you are still facing the issue, kindly create JSFiddle reproducing the issue you are facing along with sample data and share it with us so that we can look into the code / chart-options being used, run it at our end to understand the use-case better and help you out.

    —-
    Manoj Mohan
    Team CanvasJS

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.