How to ruleX to categorical x axis?

Community Help
1

I would like to create a (percent) score histogram with average and median marked, something like this:

rulex
rulex603×393 7.75 KB

On my x axis the domain is [0, 5, 10, …, 95, 100] and when I add my ruleX average and median:

      marks: [
        Plot.axisX({ fontSize: 16 }),
        Plot.axisY({ fontSize: 16 }),
        Plot.ruleY([0]),
        Plot.ruleX([+response.data.stats.percAverage], {
          stroke: 'red',
          strokeDasharray: '4',
          title: 'Average',
        }),
        Plot.ruleX([+response.data.stats.percMedian], {
          stroke: 'green',
          strokeDasharray: '2,2',
          title: 'Median',
        }),
        Plot.barY(data, {
          x: 'x',
          y: 'y',
          fill: 'rgb(160, 72, 253)', // Interior color
          // stroke: 'white', // Outline color
          // strokeWidth: 1.5, // Outline th
          title: (d) => `${props.xLabel}: ${d.x}\n${props.yLabel}: ${d.y}`,
          tip: true,
        }),
      ],

they are not drawn unless they coincide with the domain category (eg. average 55 will be show, but average 56 will not), like in this image:

rulex2
rulex2756×515 5.54 KB

How can I show these numerical values (dashed lines) over my bars?

2

Please read 📣 Support for Plot, D3 and Framework has moved to GitHub, thank you!

3

Since you’re using bars, the x scale is ordinal, not continuous. You would have to switch to using a rect mark with an interval to make it continuous. And then it could display any value. Please share a notebook if you need more details.

1 Like