Custom Chart Layout

d3fc has a cartesian component that is 'opinionated' in its design. If you want a chart which doesn't follow the layout conventions of this chart then you need to construct a chart from more basic / fundamental components.

This example shows how to render a basic cartesian chart without using the d3fc cartesian chart component. It makes heavy use of the d3fc-svg and d3fc-group custom elements that make provide measure and draw events. These make it easier to construct responsive charts that can resize, without the need for special rendering logic.

Built with blockbuilder.org

<!DOCTYPE html>

<script src="https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
<script src="https://unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<d3fc-group id="chart" auto-resize style="display: flex; height: 500px; width: 100%; overflow: hidden">
  <div style="flex: 1; display: flex; flex-direction: column; padding-right: 1em">
    <div style="flex: 1; display: flex; flex-direction: row">
      <div style="width: 1em;">
        <div class='vertical-text'>Price</div>
      </div>
      <d3fc-svg id='y-axis' style='width: 1em;'></d3fc-svg>
      <d3fc-svg id="plot-area" style="flex: 1; overflow: hidden"></d3fc-svg>
    </div>
    <d3fc-svg id="x-axis" style="height: 2em; margin-left: 2em"></d3fc-svg>
  </div>
</d3fc-group>

https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js

https://unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js

https://unpkg.com/babel-standalone@6/babel.min.js

https://d3js.org/d3.v4.min.js

https://unpkg.com/d3fc@13.0.1