Naeem's public fiddles
-
Combined Bullet/Column and Line Graphs with Multiple Value Axes
<!-- wp:paragraph --> <p>The <code>XYChart</code> is a universal chart type covering most of all of your two-dimensional charting needs. It can also have multiple value axes to represent dramatically different series in a nice readable chart. In this demo we plot two column series and two line series with two value axes.</p> <!-- /wp:paragraph --> <!-- wp:heading --> <h2 class="wp-block-heading">Key implementation details</h2> <!-- /wp:heading --> <!-- wp:paragraph --> <p>We create two value axes and position them on the opposite sides of the plot area. To do that we set <code>opposite: true</code> on the renderer of the second axis. When creating our column series we set there <code>yAxis: yAxis0</code> (our first value axis) and on the line series we set the <code>yAxis</code> to <code>yAxis1</code>.</p> <!-- /wp:paragraph --> <!-- wp:heading --> <h2 class="wp-block-heading">Related tutorials</h2> <!-- /wp:heading --> <!-- wp:list --> <ul><!-- wp:list-item --> <li><a href="https://www.amcharts.com/docs/v5/charts/xy-chart/">XY chart</a></li> <!-- /wp:list-item --> <!-- wp:list-item --> <li><a href="https://www.amcharts.com/docs/v5/charts/xy-chart/axes/value-axis/">Value axis</a></li> <!-- /wp:list-item --> <!-- wp:list-item --> <li><a href="https://www.amcharts.com/docs/v5/charts/xy-chart/series/smoothed-series/">Smoothed line series</a></li> <!-- /wp:list-item --> <!-- wp:list-item --> <li><a href="https://www.amcharts.com/docs/v5/charts/xy-chart/series/column-series/">Column series</a></li> <!-- /wp:list-item --></ul> <!-- /wp:list -->
-
Weight simple
No-Library (pure JS), HTML, CSS, JavaScript
-
vcdkbqjp
No-Library (pure JS), HTML, CSS, JavaScript
-
tw5dyoqz
Lo-Dash 2.2.1, HTML, CSS, JavaScript
-
t39hkj1c
No-Library (pure JS), HTML, CSS, JavaScript
-
2agqs9we
No-Library (pure JS), HTML, CSS, JavaScript
-
React Base Fiddle (JSX)
Starting point for creating JSFiddles with React.
-
binary-output
No-Library (pure JS), HTML, CSS, JavaScript
-
binary to dec
No-Library (pure JS), HTML, CSS, JavaScript
-
h9swLzo6
No-Library (pure JS), HTML, CSS, JavaScript
-
2uzx3phc
No-Library (pure JS), HTML, CSS, JavaScript
-
Lrf5b1cu
jQuery 2.1.3, HTML, CSS, JavaScript
-
async-await
No-Library (pure JS), HTML, CSS, JavaScript
-
generator function
No-Library (pure JS), HTML, CSS, JavaScript
-
tnpjhrkw
No-Library (pure JS), HTML, CSS, JavaScript
-
ece95epo
No-Library (pure JS), HTML, CSS, JavaScript
-
2tfm5whp
jQuery 2.2.4, HTML, CSS, JavaScript
-
Lygpk2L9
No-Library (pure JS), HTML, CSS, JavaScript
-
ntdp3h8x
No-Library (pure JS), HTML, CSS, JavaScript
-
urse9d01
jQuery 2.1.3, HTML, CSS, JavaScript