phibr0 / obsidian-charts

Charts - Obsidian Plugin | Create editable, interactive and animated Charts in Obsidian via Chart.js
https://charts.phib.ro/
GNU Affero General Public License v3.0
546 stars 25 forks source link

[Bug]: No theme colors when using window.renderChart #103

Open anstadnik opened 8 months ago

anstadnik commented 8 months ago

Describe the bug

When using window.renderChart, there are no theme colors.

Relevant errors (if available)

No response

Steps to reproduce

Plot a graph using window.renderChart.

Expected Behavior

First graph should use theme colors.

Additional context

image

Code

type: line
    labels: [Monday,Tuesday,Wednesday,Thursday,Friday]
    series:
        - title: Title 1
          data: [1,2,3,4,5]
        - title: Title 2
          data: [5,4,3,2,1]
        - title: Title 3
          data: [8,2,5,-1,4]

```dataviewjs
const chartData = {
  type: 'line',
  data: {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    datasets: [
      {
        label: 'Title 1',
        data: [1, 2, 3, 4, 5],
      },
      {
        label: 'Title 2',
        data: [5, 4, 3, 2, 1],
      },
      {
        label: 'Title 3',
        data: [8, 2, 5, -1, 4],
      }
    ]
  },
};

window.renderChart(chartData, this.container);


### Operating system

macOS
tanchao90 commented 8 months ago

I have the same problem and hope to fix it soon.

const data = dv.current()

const chartData = {
    type: 'line',
    data: {
        labels: ['2023-01', '2023-02', '2023-03', '2023-04'],
        datasets: [{
            label: 'Kobe',
            data: [60, 70, 80, 90]
        },{
            label: 'Jordan',
            data: [90, 80, 80, 70]
        }]
    }
}

window.renderChart(chartData, this.container);
image
anstadnik commented 8 months ago

Apparently that feature only works for chart code block, so as a workaround I used

dv.paragraph(`\`\`\`chart
...
\`\`\``);
tanchao90 commented 8 months ago

I hope author can upgrade chartjs to 4.4.0 to support the feature:

Default color palette

image
kimobot commented 3 months ago

A little late to the party, but I came across the same issue with the axis labels on my radar graphs and found a solution. After a bit of digging into ChartJS, I found that it's possible to specify colours manually. Using your example:

image

```dataviewjs
const chartData = {
  type: 'line',
  data: {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    datasets: [
      {
        label: 'Title 1',
        data: [1, 2, 3, 4, 5],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)'
        ],
        borderWidth: 1,
      },
      {
        label: 'Title 2',
        data: [5, 4, 3, 2, 1],
      },
      {
        label: 'Title 3',
        data: [8, 2, 5, -1, 4],
      }
    ]
  },
};
window.renderChart(chartData, this.container);