Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

timeseries bar chart with multiple series appears shifted and cutoff #4178

Open
lovasoa opened this issue Jan 4, 2024 · 1 comment
Open

timeseries bar chart with multiple series appears shifted and cutoff #4178

lovasoa opened this issue Jan 4, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@lovasoa
Copy link

lovasoa commented Jan 4, 2024 •
edited

Description

Initially reported in lovasoa/SQLpage#172

Steps to Reproduce

  1. Create a non-stacked bar chart with
    • a datetime x axis
    • 10 distinct date values for each series
    • 10 series

Expected Behavior

The value for the first datetime of the first series should be visible at the left of the graph.
The value for the last datetime of the last series should be located at the right end of the graph.

Actual Behavior

The values for the first three series of the first date are off-screen, not visible.
The values for the last three series of the last date are off-screen, not visible.

Screenshots

image

In this example,

  • the values for S0, S1, and S2 are not visible for 2010, and
  • the values for S7, S8, and S9 are not visible for 2019.

Reproduction Link

https://jsfiddle.net/wLhyq0fj/13/

Example JSON ApexCharts options and data that trigger the issue 
{
  "chart": {
    "type": "bar",
    "fontFamily": "inherit",
    "parentHeightOffset": 0,
    "height": "250px",
    "stacked": false,
    "toolbar": {
      "show": true
    },
    "animations": {
      "enabled": false
    },
    "zoom": {
      "enabled": false
    }
  },
  "theme": {
    "palette": "palette4"
  },
  "dataLabels": {
    "enabled": false
  },
  "fill": {
    "type": "solid"
  },
  "stroke": {
    "width": 1,
    "lineCap": "round",
    "curve": "smooth"
  },
  "xaxis": {
    "tooltip": {
      "enabled": false
    },
    "tickAmount": 9,
    "title": {},
    "type": "datetime",
    "convertedCatToNumeric": false
  },
  "yaxis": [
    {
      "show": true,
      "showAlways": false,
      "showForNullSeries": true,
      "opposite": false,
      "reversed": false,
      "logarithmic": false,
      "logBase": 10,
      "tickAmount": null,
      "stepSize": null,
      "forceNiceScale": false,
      "floating": false,
      "labels": {
        "show": true,
        "minWidth": 0,
        "maxWidth": 160,
        "offsetX": 0,
        "offsetY": 0,
        "rotate": 0,
        "padding": 20,
        "style": {
          "colors": [
            null,
            null,
            null,
            null,
            null,
            null
          ],
          "fontSize": "11px",
          "fontWeight": 400,
          "cssClass": ""
        }
      },
      "axisBorder": {
        "show": false,
        "color": "#e0e0e0",
        "width": 1,
        "offsetX": 0,
        "offsetY": 0
      },
      "axisTicks": {
        "show": false,
        "color": "#e0e0e0",
        "width": 6,
        "offsetX": 0,
        "offsetY": 0
      },
      "title": {
        "rotate": -90,
        "offsetY": 0,
        "offsetX": 0,
        "style": {
          "fontSize": "11px",
          "fontWeight": 900,
          "cssClass": ""
        }
      },
      "tooltip": {
        "enabled": false,
        "offsetX": 0
      },
      "crosshairs": {
        "show": true,
        "position": "front",
        "stroke": {
          "color": "#b6b6b6",
          "width": 1,
          "dashArray": 0
        }
      }
    }
  ],
  "zaxis": {
    "title": {}
  },
  "markers": {
    "size": 0,
    "strokeWidth": 0,
    "hover": {
      "sizeOffset": 5
    }
  },
  "tooltip": {
    "fillSeriesColor": false
  },
  "plotOptions": {
    "bar": {
      "horizontal": false
    },
    "bubble": {
      "minBubbleRadius": 5
    }
  },
  "colors": [
    "#4299e1",
    "#d63939",
    "#74b816",
    "#0054a6",
    "#d6336c",
    "#4263eb",
    "#ae3ec9",
    "#f59f00",
    "#17a2b8",
    "#2fb344",
    "#f76707"
  ],
  "series": [
    {
      "name": "S0",
      "data": [
        {
          "x": "2010-01-01T00:00:00.000Z",
          "y": 8
        },
        {
          "x": "2011-01-01T00:00:00.000Z",
          "y": 7
        },
        {
          "x": "2012-01-01T00:00:00.000Z",
          "y": 5
        },
        {
          "x": "2013-01-01T00:00:00.000Z",
          "y": 8
        },
        {
          "x": "2014-01-01T00:00:00.000Z",
          "y": 2
        },
        {
          "x": "2015-01-01T00:00:00.000Z",
          "y": 7
        },
        {
          "x": "2016-01-01T00:00:00.000Z",
          "y": 7
        },
        {
          "x": "2017-01-01T00:00:00.000Z",
          "y": 6
        },
        {
          "x": "2018-01-01T00:00:00.000Z",
          "y": 1
        },
        {
          "x": "2019-01-01T00:00:00.000Z",
          "y": 8
        }
      ]
    },
    {
      "name": "S1",
      "data": [
        {
          "x": "2010-01-01T00:00:00.000Z",
          "y": 4
        },
        {
          "x": "2011-01-01T00:00:00.000Z",
          "y": 2
        },
        {
          "x": "2012-01-01T00:00:00.000Z",
          "y": 0
        },
        {
          "x": "2013-01-01T00:00:00.000Z",
          "y": 6
        },
        {
          "x": "2014-01-01T00:00:00.000Z",
          "y": 5
        },
        {
          "x": "2015-01-01T00:00:00.000Z",
          "y": 5
        },
        {
          "x": "2016-01-01T00:00:00.000Z",
          "y": 2
        },
        {
          "x": "2017-01-01T00:00:00.000Z",
          "y": 9
        },
        {
          "x": "2018-01-01T00:00:00.000Z",
          "y": 9
        },
        {
          "x": "2019-01-01T00:00:00.000Z",
          "y": 8
        }
      ]
    },
    {
      "name": "S2",
      "data": [
        {
          "x": "2010-01-01T00:00:00.000Z",
          "y": 1
        },
        {
          "x": "2011-01-01T00:00:00.000Z",
          "y": 3
        },
        {
          "x": "2012-01-01T00:00:00.000Z",
          "y": 7
        },
        {
          "x": "2013-01-01T00:00:00.000Z",
          "y": 0
        },
        {
          "x": "2014-01-01T00:00:00.000Z",
          "y": 4
        },
        {
          "x": "2015-01-01T00:00:00.000Z",
          "y": 8
        },
        {
          "x": "2016-01-01T00:00:00.000Z",
          "y": 2
        },
        {
          "x": "2017-01-01T00:00:00.000Z",
          "y": 2
        },
        {
          "x": "2018-01-01T00:00:00.000Z",
          "y": 1
        },
        {
          "x": "2019-01-01T00:00:00.000Z",
          "y": 5
        }
      ]
    },
    {
      "name": "S3",
      "data": [
        {
          "x": "2010-01-01T00:00:00.000Z",
          "y": 9
        },
        {
          "x": "2011-01-01T00:00:00.000Z",
          "y": 3
        },
        {
          "x": "2012-01-01T00:00:00.000Z",
          "y": 9
        },
        {
          "x": "2013-01-01T00:00:00.000Z",
          "y": 8
        },
        {
          "x": "2014-01-01T00:00:00.000Z",
          "y": 6
        },
        {
          "x": "2015-01-01T00:00:00.000Z",
          "y": 7
        },
        {
          "x": "2016-01-01T00:00:00.000Z",
          "y": 3
        },
        {
          "x": "2017-01-01T00:00:00.000Z",
          "y": 6
        },
        {
          "x": "2018-01-01T00:00:00.000Z",
          "y": 7
        },
        {
          "x": "2019-01-01T00:00:00.000Z",
          "y": 5
        }
      ]
    },
    {
      "name": "S4",
      "data": [
        {
          "x": "2010-01-01T00:00:00.000Z",
          "y": 7
        },
        {
          "x": "2011-01-01T00:00:00.000Z",
          "y": 4
        },
        {
          "x": "2012-01-01T00:00:00.000Z",
          "y": 3
        },
        {
          "x": "2013-01-01T00:00:00.000Z",
          "y": 5
        },
        {
          "x": "2014-01-01T00:00:00.000Z",
          "y": 5
        },
        {
          "x": "2015-01-01T00:00:00.000Z",
          "y": 7
        },
        {
          "x": "2016-01-01T00:00:00.000Z",
          "y": 7
        },
        {
          "x": "2017-01-01T00:00:00.000Z",
          "y": 0
        },
        {
          "x": "2018-01-01T00:00:00.000Z",
          "y": 5
        },
        {
          "x": "2019-01-01T00:00:00.000Z",
          "y": 3
        }
      ]
    },
    {
      "name": "S5",
      "data": [
        {
          "x": "2010-01-01T00:00:00.000Z",
          "y": 7
        },
        {
          "x": "2011-01-01T00:00:00.000Z",
          "y": 8
        },
        {
          "x": "2012-01-01T00:00:00.000Z",
          "y": 2
        },
        {
          "x": "2013-01-01T00:00:00.000Z",
          "y": 4
        },
        {
          "x": "2014-01-01T00:00:00.000Z",
          "y": 6
        },
        {
          "x": "2015-01-01T00:00:00.000Z",
          "y": 8
        },
        {
          "x": "2016-01-01T00:00:00.000Z",
          "y": 8
        },
        {
          "x": "2017-01-01T00:00:00.000Z",
          "y": 1
        },
        {
          "x": "2018-01-01T00:00:00.000Z",
          "y": 7
        },
        {
          "x": "2019-01-01T00:00:00.000Z",
          "y": 9
        }
      ]
    },
    {
      "name": "S6",
      "data": [
        {
          "x": "2010-01-01T00:00:00.000Z",
          "y": 3
        },
        {
          "x": "2011-01-01T00:00:00.000Z",
          "y": 7
        },
        {
          "x": "2012-01-01T00:00:00.000Z",
          "y": 0
        },
        {
          "x": "2013-01-01T00:00:00.000Z",
          "y": 4
        },
        {
          "x": "2014-01-01T00:00:00.000Z",
          "y": 1
        },
        {
          "x": "2015-01-01T00:00:00.000Z",
          "y": 3
        },
        {
          "x": "2016-01-01T00:00:00.000Z",
          "y": 1
        },
        {
          "x": "2017-01-01T00:00:00.000Z",
          "y": 9
        },
        {
          "x": "2018-01-01T00:00:00.000Z",
          "y": 8
        },
        {
          "x": "2019-01-01T00:00:00.000Z",
          "y": 5
        }
      ]
    },
    {
      "name": "S7",
      "data": [
        {
          "x": "2010-01-01T00:00:00.000Z",
          "y": 4
        },
        {
          "x": "2011-01-01T00:00:00.000Z",
          "y": 6
        },
        {
          "x": "2012-01-01T00:00:00.000Z",
          "y": 0
        },
        {
          "x": "2013-01-01T00:00:00.000Z",
          "y": 5
        },
        {
          "x": "2014-01-01T00:00:00.000Z",
          "y": 1
        },
        {
          "x": "2015-01-01T00:00:00.000Z",
          "y": 8
        },
        {
          "x": "2016-01-01T00:00:00.000Z",
          "y": 3
        },
        {
          "x": "2017-01-01T00:00:00.000Z",
          "y": 9
        },
        {
          "x": "2018-01-01T00:00:00.000Z",
          "y": 4
        },
        {
          "x": "2019-01-01T00:00:00.000Z",
          "y": 2
        }
      ]
    },
    {
      "name": "S8",
      "data": [
        {
          "x": "2010-01-01T00:00:00.000Z",
          "y": 7
        },
        {
          "x": "2011-01-01T00:00:00.000Z",
          "y": 3
        },
        {
          "x": "2012-01-01T00:00:00.000Z",
          "y": 5
        },
        {
          "x": "2013-01-01T00:00:00.000Z",
          "y": 5
        },
        {
          "x": "2014-01-01T00:00:00.000Z",
          "y": 6
        },
        {
          "x": "2015-01-01T00:00:00.000Z",
          "y": 6
        },
        {
          "x": "2016-01-01T00:00:00.000Z",
          "y": 7
        },
        {
          "x": "2017-01-01T00:00:00.000Z",
          "y": 3
        },
        {
          "x": "2018-01-01T00:00:00.000Z",
          "y": 4
        },
        {
          "x": "2019-01-01T00:00:00.000Z",
          "y": 9
        }
      ]
    },
    {
      "name": "S9",
      "data": [
        {
          "x": "2010-01-01T00:00:00.000Z",
          "y": 6
        },
        {
          "x": "2011-01-01T00:00:00.000Z",
          "y": 8
        },
        {
          "x": "2012-01-01T00:00:00.000Z",
          "y": 2
        },
        {
          "x": "2013-01-01T00:00:00.000Z",
          "y": 9
        },
        {
          "x": "2014-01-01T00:00:00.000Z",
          "y": 6
        },
        {
          "x": "2015-01-01T00:00:00.000Z",
          "y": 2
        },
        {
          "x": "2016-01-01T00:00:00.000Z",
          "y": 5
        },
        {
          "x": "2017-01-01T00:00:00.000Z",
          "y": 5
        },
        {
          "x": "2018-01-01T00:00:00.000Z",
          "y": 9
        },
        {
          "x": "2019-01-01T00:00:00.000Z",
          "y": 2
        }
      ]
    }
  ],
  "annotations": {
    "yaxis": [],
    "xaxis": [],
    "points": []
  }
}
@lovasoa lovasoa added the bug Something isn't working label Jan 4, 2024
This was referenced Jan 4, 2024
Open
Open
rosco54 added a commit to rosco54/apexcharts.js that referenced this issue Feb 11, 2024
@rosco54
Bug apexcharts#4178 fix
2fc7a94
@rosco54
Copy link
Contributor

rosco54 commented Feb 11, 2024

I have submitted a pull request for a solution to this:
#4228

rosco54 added a commit to rosco54/apexcharts.js that referenced this issue Feb 11, 2024
@rosco54
Bug apexcharts#4178 fix
33a8edd
junedchhipa added a commit that referenced this issue Feb 11, 2024
@junedchhipa
Merge pull request #4228 from rosco54/Issue_4178
5cd2811 
Issue #4178 fix
@rosco54 rosco54 mentioned this issue Feb 12, 2024
Open
mouxdev pushed a commit to mouxdev/apexcharts.js that referenced this issue May 29, 2024
@rosco54 @mouxdev
Bug apexcharts#4178 fix
3bf9992
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@lovasoa @rosco54