sgratzl / chartjs-chart-pcp

Chart.js Parallel Coordinates Plot
https://www.sgratzl.com/chartjs-chart-pcp/
MIT License
26 stars 3 forks source link

Y-Axis Labels #67

Open jra457 opened 3 months ago

jra457 commented 3 months ago

It would be great if the left side of the plot could be labeled with the data names of each line.

User story

Users would be able to quickly gain insight into what the plot was representing if the data labels were shown. Then they would be able to hover over the lines that correspond to the specific data users are interested for the actual values.

Additional context

I was able to add some of the words represented in the plot by adding them to the ticks on the y axis in options. This did lead to a gap between the left most edge of the plot and the start of the actual plot, most words were left out using this method, and the words were not properly aligned with the corresponding line.

    const chart = new Chart(ctx, {
      type: 'pcp',
      data: {
        labels: pcpWords.map((c) => c.word),
        datasets: attrs.map((attr) => ({
          label: attr,
          data: pcpWords.map((c) => c[attr]),
        })),
      },
      options: {
        scales: {
          y: {
            type: 'linear',
            position: 'left',
            title: {
              display: true,
              text: 'Words'
            },
            ticks: {
              callback: function (value, index) {
                return pcpWords[index].word;
              }
            }
          }
        }
      },
    });

Screenshot 2024-07-25 113319

sgratzl commented 3 months ago

I'm confused about this plot if X = time, why not using a line chart?

jra457 commented 3 months ago

We are planning to set up the PCP plot with the ability to switch the x-axis between time and platform. I attached an image of the one by platform. (I'm not sure how the white bar got inserted into the image, I guess something went wrong when it was converted)

wordsByPlatform