this is my code
import { Component, OnInit } from ‘@angular/core’`;
import * as CanvasJS from ‘src/assets/canvasjs.min’;
// import Konva from ‘konva/lib/Core’;
import { Observable } from ‘rxjs’;
import { HttpResponse, HttpClient } from ‘@angular/common/http’;
//import * as $ from ‘jquery’;
declare var $: any;
@Component({
selector: ‘app-practice’,
templateUrl: ‘./practice.component.html’,
styleUrls: [‘./practice.component.css’]
})
export class PracticeComponent implements OnInit {
WIDTH = 3000;
HEIGHT = 3000;
NUMBER = 200;
// controlchart: any;
constructor(private http: HttpClient) { }
ngOnInit() {
var chart= new CanvasJS.Chart(“chartContainer”, {
animationEnabled: true,
exportEnabled: true,
zoomEnabled: true,
responsive: true,
maintainAspectRatio: false,
//backgroundColor: “#F5DEB3”,
theme: “light2”,
title:{
text: “Simple Line Chart”
},
toolTip:{
content:”x:{x}, <br/> y: {y} ”
},
axisY: {
title: “Sales”,
tickColor: “navy”,
labelFontSize: 10,
gridColor: “navy”,
tickLength: 0,
},
axisY2: {
title: “Hours”,
//interval: 10,
tickLength: 0
},
axisX: {
labelFontSize: 10,
},
data: [{
type: “line”,
fontFamily: “tahoma”,
markerType: “none”,
click: selectOnClick,
dataPoints: [
{x: 2, y: 13, markerImageUrl: “/assets/images/0.png”},
{x: 3, y: 18, markerImageUrl: “/assets/images/100_I.svg”},
{x: 4, y: 20, markerImageUrl: “/assets/images/100_I.svg”},
{x: 5, y: 17, markerImageUrl: “/assets/images/101.png”},
{x: 6, y: 10, markerImageUrl: “/assets/images/101.svg”},
{x: 7, y: 13, markerImageUrl: “/assets/images/101_C.svg”},
{x: 8, y: 18, markerImageUrl: “/assets/images/101_D.svg”},
{x: 9, y: 20, markerImageUrl: “/assets/images/102_A.svg”},
{x: 10, y: 47, markerImageUrl: “/assets/images/102_C.svg”},
{ x: 10, y: 71, markerImageUrl: “/assets/images/102_D.svg”},
{ x: 20, y: 55, markerImageUrl: “/assets/images/102_F.svg” },
{ x: 30, y: 50, markerImageUrl: “/assets/images/102_I.svg” },
{ x: 40, y: 70, markerImageUrl: “/assets/images/102_N.svg” },
{ x: 50, y: 71, markerImageUrl: “/assets/images/102_RD.svg” },
{ x: 60, y: 55, markerImageUrl:”/assets/images/102_RU.svg” },
{ x: 70, y: 50, markerImageUrl: “/assets/images/102_TD.svg” },
]
},
]
});
chart.render();
function selectOnClick(e) {
alert( e.dataSeries.type + “, dataPoint { x:” + e.dataPoint.x + “, y: “+ e.dataPoint.y + ” }” );
}
var customMarkers= [];
addMarkerImages(chart);
function addMarkerImages(chart){
for(var i = 0; i < chart.data[0].dataPoints.length; i++){
customMarkers.push($(““).attr(“src”, chart.data[0].dataPoints[i].markerImageUrl)
.css(“display”, “none”)
.css(“height”, 15)
.css(“width”, 15)
.appendTo($(“#chartContainer>.canvasjs-chart-container”))
);
positionMarkerImage(customMarkers[i], i);
}
}
function positionMarkerImage(customMarker, index){
var pixelX = chart.axisX[0].convertValueToPixel(chart.options.data[0].dataPoints[index].x);
var pixelY = chart.axisY[0].convertValueToPixel(chart.options.data[0].dataPoints[index].y);
customMarker.css({“position”: “absolute”,
“display”: “block”,
“top”: pixelY – customMarker.height()/2,
“left”: pixelX – customMarker.width()/2
});
}
$(window).resize(function() {
for(var i = 0; i < chart.data[0].dataPoints.length; i++){
positionMarkerImage(customMarkers[i], i);
}
});
}