Блог

Я пытаюсь создать многоцветную гистограмму с помощью библиотеки uber react-vis. Проблема, с которой я сталкиваюсь, заключается в том, что крайняя левая гистограмма переполняется под осью yAxis вместо того, чтобы располагаться справа от нее.

Вы можете ознакомиться с этой версией https://codepen.io/anon/pen/mozzeE?editors=0011

 function Chart() {
  const data = [1,2, 3]
  return <XYPlot
          // xType="ordinal"
          width={300}
          height={300}
          xDistance={100}
         >
          <HorizontalGridLines />
          {data.map((n, k) => {
        const y = data.length 5 - n
        return <VerticalBarSeries
                 className="vertical-bar-series-example"
                 color={makeHexString()}
                 data={[
            {x: n, y}
          ]}/>

    })}

          <YAxis />
  </XYPlot>;
}
  

Для тех, кто когда-либо будет сталкиваться с этим: Вам нужно указать xDomain для XYPlot следующим образом: xDomain={[min_X_value, max_X_value]}

Где min_X_value, max_X_value — ваши минимальное и максимальное значения для X