CODEWITHSUNDEEP
javascriptplotly
dsadnick
dsadnick

Reputation: 624

Change Marker Shapes in Plotly .js

Im looking for a little assistance in changing the marker shapes in the plotly.js libary.

What I am looking to do is change the first Marker and last marker for each group to a vertical line, and the middle one to a diamond.

I have followed this reference link from plotly but can not seem to get it to work.

Here is my JS that im using.

var subject = ["Title 1","Title 1","Title 1","Title 2","Title 2","Title 2"];
var score = [40,50,60,20,40,60];
var data = [{
    type: 'scatter',
    x: score,
    y: subject,
    mode: 'line',      
    transforms: [{
        type: 'groupby',
        groups: subject,
    }],  
    hoverinfo: 'text',
    text: ['Lower Index : 40','Est : 50','Higher Index : 60','Lower Index : 20','Est : 40','Higher Index : 60'],
    marker: {
        size: 12,
        shape: ['line-ew',"diamond-open","line-ew","line-ew","diamond-open","line-ew"]
    },
}];
var layout = {
    xaxis: {
        type: '-',
        title: "x Title",
        range:[0,100]
    },
    yaxis: {
        title: "Y title",
    },
    title: "Main Title",
    showlegend: false,
    legend: {"orientation": "h"}
    };
Plotly.plot('myGraph', data,layout)

And a code pen of the same example

https://codepen.io/dsadnick/pen/xYEXXw

Upvotes: 2

Views: 7113

Answers (1)

dsadnick
dsadnick

Reputation: 624

After going line by line i figured out the problem,

marker: {
    size: 12,
    shape: ['line-ew',"diamond-open","line-ew","line-ew","diamond-open","line-ew"]
},

Should of been

marker: {
    size: 12,
    symbol: ['line-ew',"diamond-open","line-ew","line-ew","diamond-open","line-ew"]
},

Upvotes: 5

Related Questions