caronchen / obsidian-chartsview-plugin

Data visualization solution in Obsidian, support plots and graphs.
MIT License
217 stars 11 forks source link

Formating and coloring scatter plot chart #53

Closed merlinuwe closed 1 year ago

merlinuwe commented 1 year ago

Thanks for your great plugin.

Is there a way to give elements of the chart different colors? I tried this, with no results:


```chartsview
#-----------------#
#- chart type    -#
#-----------------#
type: Scatter

#-----------------#
#- chart data    -#
#-----------------#
data:
  - label: "-4"
    value: 16
  - label: "-3"
    value: 9
  - label: "-2"
    value: 4
  - label: "-1"
    value: 1
  - label: "0"
    value: 0
  - label: "1"
    value: 1
  - label: "2"
    value: 4
  - label: "3"
    value: 9
  - label: "4"
    value: 16

#-----------------#
#- chart options -#
#-----------------#
options:
  xField: label
  yField: value
color: '#FF0000'


It has no well made contrast and the font of the axes is too tiny.

![image](https://github.com/caronchen/obsidian-chartsview-plugin/assets/4138869/a5fc39cf-cd98-45ef-8e3a-f0a83961160d)
caronchen commented 1 year ago

Yes, you can custom color or shape, and change size.

#-----------------#
#- chart type    -#
#-----------------#
type: Scatter

#-----------------#
#- chart data    -#
#-----------------#
data:
  - label: "-4"
    value: 16
  - label: "-3"
    value: 9
  - label: "-2"
    value: 4
  - label: "-1"
    value: 1
  - label: "0"
    value: 0
  - label: "1"
    value: 1
  - label: "2"
    value: 4
  - label: "3"
    value: 9
  - label: "4"
    value: 16

#-----------------#
#- chart options -#
#-----------------#
options:
  xField: label
  yField: value
  colorField: value
  shapeField: value
  size: 5
  label: {}
  color: |
    function (item) {
      if (item.value >= 5) {
        return '#FF0000';
      } else {
        return '#6F5EF9';
      }
    }
  shape: |
    function (item) {
      if (item.value >= 5) {
        return 'diamond';
      } else {
        return 'bowtie';
      }
    }
image
merlinuwe commented 1 year ago

Thank you very much, it works.

(Do you know a place where some english or german documentation about this lives?)

caronchen commented 1 year ago

Thank you very much, it works.

(Do you know a place where some english or german documentation about this lives?)

API: https://charts.ant.design/en/api/plots/scatter

Examples: https://charts.ant.design/en/examples/scatter/scatter/#mapping-color-and-shape