Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

HTML

<script src="https://www.jchartfx.com/libs/v7/current/js/jchartfx.coreVector.js"></script>
<script src="https://www.jchartfx.com/libs/v7/current/js/jchartfx.annotation.js"></script>
<script src="https://www.jchartfx.com/libs/v7/current/js/jchartfx.highlowclose.js"></script>
<script src="https://www.jchartfx.com/libs/v7/current/js/jchartfx.userinterface.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://www.jchartfx.com/libs/v7/current/js/jchartfx.system.js"></script>


<div id="ChartDiv" style="width:800px;height:600px;"> </div>
Long term Displayed<input type="checkbox" id="LTSwitch" checked>
Medium term Displayed<input type="checkbox" id="MTSwitch" checked>
Short tern Displayed<input type="checkbox" id="STSwitch" checked>
<script>
$(document).ready(function($){ loadChart()})
</script>

JavaScript

var chart1;
function loadChart()
{        
    chart1 = new cfx.Chart();
    
    PassData2();    

    chart1.setGallery(cfx.Gallery.Candlestick);
    chart1.getAxisY().setPosition(cfx.AxisPosition.Far);
    chart1.getAxisY().setForceZero(false);
//	chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Currency);
    chart1.getSeries().getItem(0).setColor("#FF9999");
    chart1.getSeries().getItem(1).setColor("#99FF99");
    chart1.getSeries().getItem(2).setColor("#FF9999");
    chart1.getSeries().getItem(3).setColor("#99FF99");
	
chart1.getAxisY().getDataFormat().setDecimals(2);
chart1.getAxisY().getLabelsFormat().setDecimals(2);
chart1.getToolTips().setAllSeries(false); 
chart1.getToolTips().setEnabled(true);
chart1.getLegendBox().setDock(cfx.DockArea.Bottom);

chart1.getLegendBox().setVisible(true);

var tooltips = chart1.getToolTips();
var lineMode = new cfx.ToolTipLineAttributes();
lineMode.setY(1.11);
lineMode.setX(0); // This instructs the tooltips to appear at a specific location rather than moving with the mouse
lineMode.getLine().setColor("#00FFFFFF"); // Hide the line
tooltips.setMode(lineMode);
tooltips.setTriggerMode(1);

var borderTemplate = '<DataTemplate xmlns:x="a"><DataTemplate.Resources><MultiplyConverter x:Key="multConverter"></MultiplyConverter><StringConverter x:Key="titleConverter"></StringConverter><Thickness x:Key="padding">4</Thickness></DataTemplate.Resources><Canvas Padding="{Binding Path=Padding}"><Border Background="#FFFFFF" BorderThickness="0" Opacity="0" Padding="0,0,0,0"><DockPanel Orientation="Vertical"><TextBlock Text="{Binding Path=Title, Converter={StaticResource titleConverter},ConverterParameter=%u}}" FontSize="{Binding Path=FontSize, Converter={StaticResource multConverter},ConverterParameter=1}" Visible="{Binding Path=TitleVisible}" HorizontalAlignment="Left" FontWeight="Bold" Margin="3,0,0,0" ></TextBlock><DockPanel x:Name="container"...