Line Chart with Background Image and Customization - CanvasJS JavaScript Charts

Line Chart with Background Image and Customization - CanvasJS JavaScript Charts

by canvasjs

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%; background-image:url('https://i.imgur.com/9YBHHXo.jpg');"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  backgroundColor: "transparent",
  axisX: {
    lineThickness: 0,
    tickLength: 0,
    labelFontColor: "rgb(255,255,255)",
    labelFontSize: 25
  },
  axisY: {
    minimum: 3,
    interval: 1,
    gridThickness: 0,
    lineThickness: 0,
    tickLength: 0,
    labelFormatter: function(e){
      return "";
    }
  },
  data: [
    {        
      type: "line",
      lineColor: "rgb(255,255,255)",
      lineThickness: 5,
      markerSize: 40,
      markerBorderColor: "rgb(255,255,255)",          
      markerBorderThickness: 5,          
      indexLabel: "{y} kn/L",
      indexLabelFontSize: 40,
      indexLabelMaxWidth: 100,
      indexLabelFontWeight: "bold",
      indexLabelFontColor: "rgb(255,255,255)",
      dataPoints: [
        { label: "18.07.2017", y: 4.14, color: "rgb(24,214,63)" },
        { label: "25.07.2017", y: 4.19, color: "rgb(233,51,51)" }
      ]
    },
    {
      type: "line",
      lineColor: "rgb(255,255,255)",
      lineThickenss: 5,
      markerSize: 0,
      highlightEnabled: false,
      toolTipContent: null,
      dataPoints: [
        { x: 0 , y: 0 },
        { x: 0 , y: 4.14 },
        { x: 0 , y: null },
        { x: 1, y: 0 },
        { x: 1, y: 4.19 }
      ]
    }
  ]
});

chart.render();