Basic Column Chart - CanvasJS
Basic Column Chart
by alexbfree
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var pareto_options = {
"toolTip": {
"enabled": false
},
"dataPointWidth": 50,
"dataPointMaxWidth": 50,
"dataPointMinWidth": 50,
"axisX": {
"labelWrap": true,
"labelMaxWidth": 105,
"labelAngle": 0,
"labelFontFamily": "Montserrat",
"interval": 1,
"titleFontSize": 16,
"labelFontSize": 16
},
"axisY": {
"title": "Tokens allocated",
"lineColor": "#4F81BC",
"tickColor": "#4F81BC",
"labelFontColor": "#4F81BC",
"titleFontColor": "#4F81BC",
"labelFontFamily": "Montserrat",
"titleFontSize": 16,
"labelFontSize": 16,
"titleFontFamily": "Montserrat",
"maximum": 100,
"interval": 25
},
"axisY2": {
"title": "Prize value (kr.)",
"titleFontFamily": "Montserrat",
"lineColor": "#C0504E",
"tickColor": "#C0504E",
"labelFontColor": "#C0504E",
"labelFontFamily": "Montserrat",
"titleFontColor": "#C0504E",
"titleFontSize": 16,
"labelFontSize": 16,
"maximum": 120
},
"data": [
{
"type": "column",
"axisYType": "primary",
"color": "#4F81BC",
"toolTipContent": "{y} tokens allocated to {label}",
"dataPoints": [
{
"x": 1,
"label": "10 to 13.9",
"y": 26
},
{
"x": 2,
"label": "14 to 17.9",
"y": 23
},
{
"x": 3,
"label": "18 to 21.9",
"y": 43
},
{
"x": 4,
"label": "22 to 25.9",
"y": 5
},
{
"x": 5,
"label": "26 to 30",
"y": 0
}
]
},
{
"type": "line",
"yValueFormatString": "0.##\"kr.\"",
"axisYType": "secondary",
"indexLabel": "{y}",
"indexLabelFontColor": "#C0504E",
"indexLabelFontFamily": "Montserrat",
"indexLabelFontSize": 16,
"color": "#C0504E",
"dataPoints": [
{
"x": 1,
"label": "10 to 13.9",
"y":...