Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bar charts with category x-axis

See original GitHub issue

Architecturally, some additional chart types can be supported as long as they conform to the following:

  • X values must be numbers, increasing and unique
  • Y values must be numbers, null or undefined for data gaps
  • X and Y arrays must be equal length
const data = [
  [1566453600, 1566457260, 1566460860, 1566464460],   // x values
  [0.54,       0.15,       3.27,       7.51      ],   // series 1
  [12.85,      null,      13.65,      14.01      ],   // series 2
  [0.52,       1.25,       0.75,       null      ],   // series 3

this means we can support:

  • line (numeric & time)
  • line with custom markers (box plots, candlesticks, stock (OHLC)
  • vt bar (column)
  • hz bar

while the x-values have to be numeric, x labels can be text, so for something like this:


you could simply keep a map in app-space

let xCats = ["Censys", "Gharchive", "NYTimes"];

let data = [
  [   0,     1,     2],
  [3.09,   2.7,  2.92],
  [1.93,   1.6,  2.02],
  [1.06,  0.93,  1.22],

let opts = {
  scales: {
    x: {
      type: 'n'
  series: {
    y: [
      {label: "PyPyBaseline"},
      {label: "PyPyKeySringCaching"},
      {label: "PyPyMapNoCache"},
  axes: {
    x: {
      values: (vals, space) => => xCats[v]),

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:11 (9 by maintainers)

github_iconTop GitHub Comments

leeoniyacommented, Oct 28, 2019

i think this type of chart is a great complement to trend lines because it fundamentally represents a type of data that cannot be represented as a trendline; it literally doubles the possible use-cases while other types of charts mostly just show the same data in a different UX (stacked, ohcl/candlestick, area, pie). i already added numeric X-axis basically for free which now opens the possibility to use uPlot as a generic function plotter.

adding this would not impact perf since this will be able to use the existing data structure and not add new mem allocations. also, it will definitely use a different drawing loop compared to the lines. the main question here is one of additional code size. my gut feeling is that it can be done for an additional 1-3k with no perf impact, and that’s a worthwhile trade-off to me.

leeoniyacommented, Mar 5, 2020

That looks intuitive enough.

it wasn’t to me!

i’ve switched it to be more uniform. among other refinements.

there is no more axis.tick and series.point for styling options; they have been rolled into single respective structures: series.points: {show: () => bool, width, size, stroke, fill} and i’ve renamed what used to be axis.ticks() to axis.split() since it applies to both ticks and grid, regardless of the visibility of either. the new axis.ticks: {show: bool, width, size, stroke} is used for styling and visibility.

next up is doing the same for cursor.points

Read more comments on GitHub >

github_iconTop Results From Across the Web

Building Charts with Multiple Series and Custom X-Axis
Building the Bar Chart. Now we're ready to build the chart with multiple series. Select columns B through H. Choose the Insert tab...
Read more >
Category x-axis - Candlestick Charts - ApexCharts.js
... Oct 06 11:30 Oct 06 14:00 Oct 06 16:30 Oct 06 19:00 Annotation Test CandleStick Chart - Category X-axis 6660.00 6640.00 6620.00...
Read more >
xAxis.categories | highcharts API Reference
xAxis. The X axis or category axis. Normally this is the horizontal axis, though if the chart is inverted this is the vertical...
Read more >
Change axis labels in a chart - Microsoft Support
Right-click the category labels you want to change, and click Select Data. Right-click the category axis and Select Data. In the Horizontal (Category)...
Read more >
Bar charts with "Category" x-axis are randomly spaced - Support
I am trying to use a “Chart” type visualization for my data. The x-axis data is categorical and y-axis is “linear”. The plot...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found