D3 Examples - Custom Chart Layout

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.

xxxxxxxxxx
 
<!DOCTYPE html>
<!-- include polyfills for custom event and Symbol (for IE) -->
<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>
​
<!-- use babel so that we can use arrow functions and other goodness in this block! -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
​
<script src="https://d3js.org/d3.v4.min.js"></script>   
<script src="https://unpkg.com/d3fc@13.0.1"></script>
​
<style>
.vertical-text {
    transform: rotate(90deg) translate(10px, -40px);
    transform-origin: bottom% right;
}
</style>
​
<d3fc-group id="#zoom-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>
​
<script src='chart.js' type='text/babel'></script>
<script src='zoom.js' type='text/babel'></script>
    