Create a chart in Lightning

Question

I want to create a chart map in lightning something like this

where the names are marked on a point on the base map based on 2 scores.

I don't see any option to create as such using scatter chart or radar chart available in chart.js Is there some other way ?

Answer 1

You can write your own chart without (too) much effort yourself. All you need to do is write your own custom renderer and write your own logic. Here's a super-basic example where I draw a black circle on the screen:

Application

<aura:application >
    <canvas aura:id="chart" />
</aura:application>

Renderer

({
    // Your renderer method overrides go here
    afterRender: function(component, helper) {
        var canvas = component.find("chart").getElement();
        var context = canvas.getContext("2d");
        context.fillStyle="black";
        context.arc(50, 50, 50, 0, 2*Math.PI);
        context.fill();
    }
})

You can also do that with SVG as well, as demonstrated in the SVG helper. While the helper itself is deprecated, it does outline how to manipulate an SVG. I personally prefer using a canvas, because doesn't involve creating a bunch of elements.