Home forums Feature Requests & Feedback custom marker type

This topic contains 3 replies, has 2 voices, and was last updated by  Shashi Ranjan 1 week, 6 days ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #27315

    i want to use custom markertype, i achieved this one but when i zoom chart then marker and line not in proper place . how to resolve the problem can u help me?

    #27325

    @kunal,

    Can you kindly create a JSFiddle reproducing the issue you are facing and share it with us so that we can look into the code, understand the scenario better and help you out?

    From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact requirements or the solution that we provide may not work properly due to the variation in chart-options being used by you and us.

    Having a JSFiddle helps us in figuring out the issue and many a time we can just edit your code on JSFiddle to fix the issue right away.


    Shashi Ranjan
    Team CanvasJS

    #27329

    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);

    }
    });

    }

    #27356

    @kunal,

    Custom markers are not supported as of now. The example shared shows you to workaround by positioning the images on top of the chart. However, to re-position images on zooming and panning, you can call positionMarkerImage() upon rangeChanged event.


    Shashi Ranjan
    Team CanvasJS

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.