Search code examples
javascriptplotlyaxis-labelsplotly.js

Place tick marks between bars in Plotly.js

Is it possible in Plotly.js to place tick marks between the bars? Here i'd like the ticks to represent cut points in a continuous distribution and the bars to represent counts within the intervals between. An alternative is to make the axis labels ranges, e.g. "5-<10", "10-<25", "25-<50", etc. but it seems cleaner to show the breaks.

Below is a mockup in Paintbrush showing the desired effect, here i added tick marks and moved the number labels by dragging. Also is a Codepen link to toy data: https://codepen.io/proto/pen/bKGOXg

enter image description here

var chart = {
  data: [
    {
      rowKey: "current",
      name: "current",
      x: ["0.1", "0.5", "1", "2", "5", "10", "25", "50", "100", "250", "500"],
      y: [
        0.006369426751592357,
        0.012738853503184714,
        0.03821656050955414,
        0.03184713375796178,
        0.10828025477707007,
        0.24203821656050956,
        0.2229299363057325,
        0.20382165605095542,
        0.12101910828025478,
        0.006369426751592357,
        0.006369426751592357
      ],
      values: [
        0.006369426751592357,
        0.012738853503184714,
        0.03821656050955414,
        0.03184713375796178,
        0.10828025477707007,
        0.24203821656050956,
        0.2229299363057325,
        0.20382165605095542,
        0.12101910828025478,
        0.006369426751592357,
        0.006369426751592357
      ],
      text: [
        "1%",
        "1%",
        "4%",
        "3%",
        "11%",
        "24%",
        "22%",
        "20%",
        "12%",
        "1%",
        "1%"
      ],
      labels: [
        "0.1",
        "0.5",
        "1",
        "2",
        "5",
        "10",
        "25",
        "50",
        "100",
        "250",
        "500"
      ],
      type: "bar",
      hoverinfo: "x+y",
      textposition: "auto",
      orientation: "v",
      mode: "lines+markers",
      marker: { color: null, colors: null },
      uid: "2cf1e3"
    }
  ],
  layout: {

    type: "bar",
    orientation: "v",
    barmode: "",
    showlegend: false,
    dataValues: true,
    series: { hoverinfo: "x+y" },
    legend: {
      orientation: "v",
      yanchor: "bottom",
      xanchor: "right",
      traceorder: "normal"
    },
    titlefont: { size: 12 },
    margin: { l: 80, r: 10, t: 140, b: 80 },
    xaxis: {
      tickangle: 0,
      tickfont: { size: 12 },
      titlefont: { size: 12, weight: 700 },
      type: "category",
      title: "scenario",
      range: [-0.5, 10.5],
      autorange: true
    },
    yaxis: {
      title: "",
      type: "linear",
      tickformat: ".0%",
      hoverformat: ".0%",
      range: [0, 0.25477707006369427],
      autorange: true
    },
    width: 500,
    height: 360,

  },
  options: {
    displayModeBar: false,
    modeBarButtonsToRemove: ["sendDataToCloud", "hoverCompareCartesian"]
  }
};
Plotly.newPlot("myDiv", chart);
Solution

  • So I checked the plotly documentation, please checkout the documentation available here

    We have a property under the bar chart object called offset. Plotly describes this property as.

    offset (number or array of numbers)
    Shifts the position where the bar is drawn (in position axis units). In "group" barmode, traces that set "offset" will be excluded and drawn in "overlay" mode instead.

    When I set the property to 0.1, I am getting the expected result. Please checkout the below example and let me know if this solves your issue!

    var chart = {
  data: [
    {
      rowKey: "current",
      name: "current",
      x: ["0.1", "0.5", "1", "2", "5", "10", "25", "50", "100", "250", "500"],
      offset: 0.1,
      y: [
        0.006369426751592357,
        0.012738853503184714,
        0.03821656050955414,
        0.03184713375796178,
        0.10828025477707007,
        0.24203821656050956,
        0.2229299363057325,
        0.20382165605095542,
        0.12101910828025478,
        0.006369426751592357,
        0.006369426751592357
      ],
      values: [
        0.006369426751592357,
        0.012738853503184714,
        0.03821656050955414,
        0.03184713375796178,
        0.10828025477707007,
        0.24203821656050956,
        0.2229299363057325,
        0.20382165605095542,
        0.12101910828025478,
        0.006369426751592357,
        0.006369426751592357
      ],
      text: [
        "1%",
        "1%",
        "4%",
        "3%",
        "11%",
        "24%",
        "22%",
        "20%",
        "12%",
        "1%",
        "1%"
      ],
      labels: [
        "0.1",
        "0.5",
        "1",
        "2",
        "5",
        "10",
        "25",
        "50",
        "100",
        "250",
        "500"
      ],
      type: "bar",
      hoverinfo: "x+y",
      textposition: "auto",
      orientation: "v",
      mode: "lines+markers",
      marker: { color: null, colors: null },
      uid: "2cf1e3"
    }
  ],
  layout: {
    colorway: [
      "#3399CC",
      "#99BB66",
      "#2266AA",
      "#FFCC00",
      "#888888",
      "#FFAA00",
      "#800080"
    ],
    color: "purple",
    plotlyType: "bar",
    type: "bar",
    orientation: "v",
    barmode: "",
    showlegend: false,
    dataValues: true,
    series: { hoverinfo: "x+y" },
    legend: {
      orientation: "v",
      yanchor: "bottom",
      xanchor: "right",
      traceorder: "normal"
    },
    titlefont: { size: 12 },
    margin: { l: 80, r: 10, t: 140, b: 80 },
    xaxis: {
      tickangle: 0,
      tickfont: { size: 12 },
      titlefont: { size: 12, weight: 700 },
      type: "category",
      title: "scenario",
      range: [-0.5, 10.5],
      ticks: "outside",
      autorange: true
    },
    yaxis: {
      title: "",
      type: "linear",
      tickformat: ".0%",
      hoverformat: ".0%",
      range: [0, 0.25477707006369427],
      autorange: true
    },
    transposeData: false,
    showOverall: false,
    width: 500,
    height: 360,
    showLegend: true,
    reverse: {},
    titles: {},
    swapCategoryAndLegend: false
  },
  options: {
    displayModeBar: false,
    modeBarButtonsToRemove: ["sendDataToCloud", "hoverCompareCartesian"]
  }
};
Plotly.newPlot("myDiv", chart);
    <head>
  <!-- Plotly.js -->
   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv" style="width: 100%; height: 500px;"></div>
  <script>
  /* JAVASCRIPT CODE GOES HERE */
  </script>
</body>