Candlestick Chart

[lucadegasperi]

Hello, I really love the work you're doing on this amazing charting library. Right now I find myself implementing a candlestick chart and don't know where to begin. Perhaps you know, or already have implemented a candlestick plugin for chartist as I haven't found any googling around. Any Help is appreciated.

[rarkins]

+1

[gionkunz]

I love candlestick charts :-) However, would need to wait for 1.0.0 and a more modularized approach.

[herringtown]

+1 for candlestick charts!

[ghost]

+1

[psimonski]

Got it already: https://github.com/gionkunz/chartist-js/pull/956

[nabtron]

@psimonski Can't find src/scripts/charts/candle.js or any related files in 0.11.0

Was it removed?

[psimonski]

@nabtron It's part of my pull request and this has to be reviewed in order to get scheduled for the next release. Maybe @gionkunz will find the time somehow soon.

[gionkunz]

Stupid question. But why can't this be done as a "plugin" for chartist? All the base classes, utilities and helpers are accessible from outside of the library. I'd recommend that this project is created similarly like a plugin in its own repository and its own NPM package. People who want to use Chartist for candlestick charts can then use your package which has a dependency to Chartist.

[dawadam]

+1 for plugin

[psimonski]

Good idea! Ok, I'll create a plugin instead.

[psimonski]

@gionkunz I thought about a plugin once again, and I guess, it's not possible because we have to pass series objects which are including four values to create a single candle.

https://en.wikipedia.org/wiki/Candlestick_chart

I considered that within the example-candle-stick.js: https://github.com/psimonski/chartist-js/blob/4fa7195d3e436df54b61cfa9353ca11128599061/site/examples/example-candle-stick.js

What's next? Thanks in advance and Best Regards, Simon

fixed grammar mistake.

[psimonski]

ping ping**

[gionkunz]

What I meant was that you create a plugin for your whole chart type like this. You can use Bar.js as a base and wrap it up like a plugin. Since all utility functions are public, you can easily create a chart type in your own library.

(function(window, document, Chartist){

var defaultOptions = {
    //... candle stick default options
  };

  /**
   * Creates a new chart
   *
   */
  function createChart(options) {
        ....
        // Create candle element
        bar = seriesElement.elem('line', positions, options.classNames.bar).attr({
          'ct:value': [value.x, value.y].filter(Chartist.isNumeric).join(','),
          'ct:meta': Chartist.serialize(metaData)
        });

        this.eventEmitter.emit('draw', Chartist.extend({
          type: 'candle',
          value: value,
          index: valueIndex,
          meta: metaData,
          series: series,
          seriesIndex: seriesIndex,
          axisX: axisX,
          axisY: axisY,
          chartRect: chartRect,
          group: seriesElement,
          element: bar
        }, positions));
      }.bind(this));
    }.bind(this));

    this.eventEmitter.emit('created', {
      bounds: valueAxis.bounds,
      chartRect: chartRect,
      axisX: axisX,
      axisY: axisY,
      svg: this.svg,
      options: options
    });
  }

  function CandleStick(query, data, options, responsiveOptions) {
    Chartist.CandleStick.super.constructor.call(this,
      query,
      data,
      defaultOptions,
      Chartist.extend({}, defaultOptions, options),
      responsiveOptions);
  }

  // Creating bar chart type in Chartist namespace
  Chartist.CandleStrick = Chartist.Base.extend({
    constructor: CandleStrick,
    createChart: createChart
  });

}(window, document, Chartist));

[psimonski]

Okay, it seems to be possible to overwrite the createChart() function by my own implementation. This could work. I need coffee ; )

[MrDevDevy]

we need this!