search

LayTec-AG / Plotly.Blazor

This library packages the well-known charting library plotly.js into a razor component that can be used in a Blazor project.
MIT License
353 stars 52 forks source link

Polar chart examples #381

Closed jacekpapiniak closed 11 months ago

jacekpapiniak commented 1 year ago

Adds some examples of polar charts from plotly doc: https://plotly.com/javascript/polar-chart/

jacekpapiniak commented 1 year ago

Initialy related to https://github.com/LayTec-AG/Plotly.Blazor/issues/169 but from I found I could not force polar chart to display GridShape as linear and with hole inside, despite setting following properties on polar layout

AngularAxis.Type = Linear GridShape = Linear Hole = 10

I did try that with the js plotly polar chart and it looks like we are not able to display grid shape as linear.

Example in plotly.js that I tried:

var data = [
  {
    type: "scatterpolar",
    r: [1, 2, 3, 4],
    theta: [0, 45, 90, 135], // The angles at which data points are located
    mode: "lines",
    fill: "toself",
    name: "Linear Polar Chart",
    subchart: "polar"
  }
];

var layout = {
  polar: {
    radialaxis: {
      visible: true,
      range: [0, 4] // Set the range of the radial axis
    },
    gridshape: "linear",
    angularaxis: {
      type: "linear", // Set the angular axis type to linear
      tickmode: "linear",
      dtick: 45 // Specify the angular tick interval (in degrees)
    }
  }
};

Plotly.newPlot('myDiv', data, layout)