title: What tool can I use to create an HTML5 candlestick chart with an inverted axis?
body: <p>Google's charting API supports a <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery/candlestickchart" rel="noreferrer">candlestick chart</a> with the ability to change the values on the X axis - i.e. they are week days here but could be other things.</p>
  <p>However, as far as I can tell, this charting API does not allow you to change the line width for the &quot;wicks&quot;, and it is impossible to invert the axis so that 0 is on top (unless you switch to using all negative values).</p>
  <p>Highcharts has a more <a href="https://www.highcharts.com/stock/demo/candlestick/gray" rel="noreferrer">full featured candlestick chart</a> and the ability to reverse the y axis, but as far as I can tell you MUST use timestamps as values for the x axis.</p>
  <p>What tool can I use to create an HTML5 candlestick chart with an inverted Y axis and the ability to set custom labels on the X axis, and possibly and option to adjust the &quot;wick&quot; thickness?</p>
  <h3>Google Chart Example</h3>
  <p><a href="https://i.stack.imgur.com/n67EN.png" rel="noreferrer"><img src="https://i.stack.imgur.com/n67EN.png" alt="" /></a></p>
  
  <h3>Highcharts Example</h3>
  <p><a href="https://i.stack.imgur.com/zra2q.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zra2q.png" alt="Picture 1.png" /></a></p>
  
  <h3>jqChart Example</h3>
  <p>(this is pretty messed up - source here <a href="http://jsfiddle.net/FSEQP/" rel="noreferrer">http://jsfiddle.net/FSEQP/</a> )</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id=&quot;jqChart&quot; style=&quot;width: 800px; height: 550px;&quot; /&gt;
      
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <pre><code>        function round(d) {
              return Math.round(100 * d) / 100;
          }
  
          var data = [];
  
          var date = new Date(2010, 0, 1);
  
          var high = Math.random() * 40;
          var close = high - Math.random();
          var low = close - Math.random();
          var open = (high - low) * Math.random() + low;
  
          data.push([date, round(high), round(low), round(open), round(close)]);
  
          for (var day = 2; day &lt;= 12; day++) {
  
              date = new Date(2010, 0, day);
  
              high = open + Math.random();
  
              close = high - Math.random();
              low = close - Math.random();
              var oldOpen = open;
              open = (high - low) * Math.random() + low;
  
              if (low &gt; oldOpen) {
                  low = oldOpen;
              }
  
              data.push([date, round(high), round(low), round(open), round(close)]);
          }
  
          $(document).ready(function () {
  
              $('#jqChart').jqChart({
                  title: { text: 'Candlestick Chart' },
                  legend: { visible: false },
  
  //                                labelsOptions : { visible: false },
  
  
  
                            axes: [
  
                                  {
                                      type: 'linear',
                                      location: 'left',
                                      reversed: true
                                  },
                                    {
                                        type: 'category',
                                        location: 'bottom',
                                                          categories: [
                                                          'Category 1', 'Category 2', 'Category 3',
                                                          'Category 4', 'Category 5', 'Category 6',
                                                          'Category 7', 'Category 8', 'Category 9',
                                                          'Category 10', 'Category 11', 'Category 12'
                                                          ],
                                        labels: {
                                                    font: '12px sans-serif',
                                                    angle: -90,
  
                                                 }
                                    }
                                 ],
  
  
  
                  series: [
                              {
                                  type: 'column',
                                  data: data
                              }
                          ]
              });
  
  
  
  
  
  
  
          });
  </code></pre>
  <p><a href="https://i.stack.imgur.com/NLSMp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NLSMp.png" alt="Picture.png" /></a></p>