# How to plot bar chart and line chart on the same plot

**URL:** <https://talk.observablehq.com/t/how-to-plot-bar-chart-and-line-chart-on-the-same-plot/9239>\
**Category:** Help\
**Created:** [May 7, 2024, 8:46pm UTC](https://talk.observablehq.com/t/how-to-plot-bar-chart-and-line-chart-on-the-same-plot/9239 "2024-05-07T20:46:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![charlieprior](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/charlieprior/32/8871_2.png) [@charlieprior](https://talk.observablehq.com/u/charlieprior)\
**Post date:** [May 7, 2024, 8:46pm UTC](https://talk.observablehq.com/t/how-to-plot-bar-chart-and-line-chart-on-the-same-plot/9239/1 "2024-05-07T20:46:17Z")

</div>

I’m trying to plot a histogram of experimental data and the analytical function as a line chart (note that the histogram is not simply the line function binned) on the same plot, but the histogram bars are really narrow. How can I fix this? The plot looks like this:

 ![Screenshot 2024-05-07 at 4.42.28 PM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/c/c909a59b1ee1c75f12e81a145400abef640fc9ff.png)  
My code is something like this:

```auto
Plot.plot({
            marks: [
                Plot.barY(bardata, {x: "energy", y: "flux"}),
                Plot.lineY(linedata, {x: "energy", y: "flux", stroke: "red"}),
                Plot.axisX({anchor: "bottom", tickSpacing: 10})
            ]
        })

```

Also, how can I make the labels on the x-axis not overlap and have a million labels?

Thank you!!

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [May 7, 2024, 9:18pm UTC](https://talk.observablehq.com/t/how-to-plot-bar-chart-and-line-chart-on-the-same-plot/9239/2 "2024-05-07T21:18:00Z")

</div>

You should only use the barY mark if your _x_ values are ordinal; it looks like you intend them to be quantitative (_energy_).

If your data is already binned, then you can use the rectY mark and the **interval** option with the binning interval (_e.g._, `interval: 1` if you binned at unit intervals along _x_).

If you don’t know the binning interval, you could use the ruleX mark to draw a skinny bar. Or you could also use the areaY mark with the _curve_ **step**.

If your data is not binned, then you can use the rectY mark and the binX transform to bin it and produce a histogram.

---

<div class="post-metadata">

**Author:** ![charlieprior](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/charlieprior/32/8871_2.png) [@charlieprior](https://talk.observablehq.com/u/charlieprior)\
**Post date:** [May 7, 2024, 9:49pm UTC](https://talk.observablehq.com/t/how-to-plot-bar-chart-and-line-chart-on-the-same-plot/9239/3 "2024-05-07T21:49:11Z")

</div>

The step curve with the areaY mark worked great. Thanks!