Perspective XY Chart bar colors

Ignition
,
1

Hi all!

I went through this post XYChart bar colors - Ignition - Inductive Automation Forum but I cannot find a solution for what I want to achieve.

Basically, I want to get a chart like the shown down, but with the first two columns with different color.

image
image1534×644 34.4 KB

I tried several things but I think I am missing something on the x-axis.

  • I created three different series (with the same x-axis): for the first bar, for the second bar and for the five last bars.
  • I tried null values for the y-axis value.
  • I even tried creating different dataSources.

For example, I created three dataSources with the same “t_stamp” variables.

img1
img1624×1020 54.8 KB

All “units_num” contains a value.
img2
img2642×1070 55.4 KB

Only the last “units_num” contains a value.
img3
img3614×1096 57.9 KB

Only the first “units_num” contains a value.

Defining only one x-axis and one y-axis (what makes sense to me):

img4
img4630×1064 56.7 KB

And defining three series:

img5
img5656×1468 78.8 KB

img6
img6690×838 43 KB

I get this:

img7
img71920×796 30.3 KB

What I do not understand. I did this quick trial in order to understand better how the chart component works and from there, get to my first goal.

What I expect for the graph would be:

  • Avg/day (last week): two different coloured (a_last_week and b_last_week) and x-space-divided columns.

  • Avg/day (this week): one coloured (a_last_week) and x-space-centered column.

  • Monday to Thursday: one coloured (a_last_week) and x-space-centered column.

  • Friday: two different coloured (a_last_week and trackers) and x-space-divided columns.

PS: remind that my main goal is only one column per x category.

Any tips please?

2

You can modify the appearance of each series, so you should be able to use XYChart.props.series[0].column.appearance.fill (and stroke) to set the color you’d like.

3

Dear @cmallonee please check again my post (I edited it) and still cannot resolve the issue with your comments. Thanks!!!

4

you might find something here

5

Dear @victordcq as you can see in the first post, I mentioned that I already went through that link, and I am still not able to solve it.

6

post the configuration of your chart here, (with demo data not in a binding)

7

@victordcq this is an example. If not valid, I will create one again

8

yes you have screen shots of the configuration, but just past the whole dict (json) in here
using the formated text </>

9

@victordcq how do I do that?

10

image
image
image

11

@victordcq

dataSources:

{
  "a_last_week": [
    {
      "t_stamp": "Avg/day \n(last week)",
      "units_num": 7.25
    },
    {
      "t_stamp": "Avg/day \n(this week)",
      "units_num": 7.25
    },
    {
      "t_stamp": "Monday",
      "units_num": 7.25
    },
    {
      "t_stamp": "Tuesday",
      "units_num": 7.25
    },
    {
      "t_stamp": "Wednesday",
      "units_num": 7.25
    },
    {
      "t_stamp": "Thursday",
      "units_num": 7.25
    },
    {
      "t_stamp": "Friday",
      "units_num": 7.25
    }
  ],
  "b_current_week": [
    {
      "t_stamp": "Avg/day \n(last week)",
      "units_num": 7.25
    },
    {
      "t_stamp": "Avg/day \n(this week)",
      "units_num": null
    },
    {
      "t_stamp": "Monday",
      "units_num": null
    },
    {
      "t_stamp": "Tuesday",
      "units_num": null
    },
    {
      "t_stamp": "Wednesday",
      "units_num": null
    },
    {
      "t_stamp": "Thursday",
      "units_num": null
    },
    {
      "t_stamp": "Friday",
      "units_num": null
    }
  ],
  "trackers": [
    {
      "t_stamp": "Avg/day\n(last week)",
      "units_num": null
    },
    {
      "t_stamp": "Avg/day\n(this week)",
      "units_num": null
    },
    {
      "t_stamp": "Monday",
      "units_num": null
    },
    {
      "t_stamp": "Tuesday",
      "units_num": null
    },
    {
      "t_stamp": "Wednesday",
      "units_num": null
    },
    {
      "t_stamp": "Thursday",
      "units_num": null
    },
    {
      "t_stamp": "Friday",
      "units_num": 6
    }
  ]
}

xAxes:

[
  {
    "name": "time",
    "label": {
      "enabled": true,
      "text": "",
      "color": ""
    },
    "inversed": false,
    "visible": true,
    "tooltip": {
      "enabled": true,
      "text": "",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "",
        "opacity": 1
      }
    },
    "render": "category",
    "category": {
      "break": {
        "enabled": false,
        "startCategory": "",
        "endCategory": "",
        "size": 0.05
      }
    },
    "date": {
      "baseInterval": {
        "enabled": false,
        "timeUnit": "hour",
        "count": 1,
        "skipEmptyPeriods": false
      },
      "range": {
        "max": "",
        "min": "",
        "useStrict": false
      },
      "break": {
        "enabled": false,
        "startDate": "",
        "endDate": "",
        "size": 0.05
      },
      "inputFormat": "yyyy-MM-dd kk:mm:ss",
      "format": "M/d"
    },
    "value": {
      "range": {
        "max": "",
        "min": "",
        "useStrict": false
      },
      "logarithmic": false,
      "break": {
        "enabled": false,
        "startValue": 0,
        "endValue": 100,
        "size": 0.05
      },
      "format": "#,###.##"
    },
    "appearance": {
      "opposite": false,
      "inside": false,
      "labels": {
        "color": "#000000",
        "opacity": 1,
        "rotation": 0,
        "verticalCenter": "middle",
        "horizontalCenter": "middle"
      },
      "grid": {
        "color": "#C0C0C0",
        "opacity": 0,
        "dashArray": "",
        "minDistance": 60,
        "position": 0.5
      },
      "font": {
        "size": "",
        "weight": 500
      }
    }
  }
]

yAxes:

[
  {
    "name": "units",
    "label": {
      "enabled": true,
      "text": "Units/day",
      "color": "#000000"
    },
    "inversed": false,
    "visible": true,
    "tooltip": {
      "enabled": true,
      "text": "",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "",
        "opacity": 1
      }
    },
    "render": "value",
    "category": {
      "break": {
        "enabled": false,
        "startCategory": "",
        "endCategory": "",
        "size": 0.05
      }
    },
    "date": {
      "baseInterval": {
        "enabled": false,
        "timeUnit": "hour",
        "count": 1,
        "skipEmptyPeriods": false
      },
      "range": {
        "max": "",
        "min": "",
        "useStrict": false
      },
      "break": {
        "enabled": false,
        "startDate": "",
        "endDate": "",
        "size": 0.05
      },
      "inputFormat": "yyyy-MM-dd kk:mm:ss",
      "format": "M/d/yyyy HH:mm:ss"
    },
    "value": {
      "range": {
        "max": "",
        "min": "",
        "useStrict": false
      },
      "logarithmic": false,
      "break": {
        "enabled": false,
        "startValue": 0,
        "endValue": 100,
        "size": 0.05
      },
      "format": "#,###.##"
    },
    "appearance": {
      "opposite": false,
      "inside": false,
      "labels": {
        "color": "#000000",
        "opacity": 1,
        "rotation": 0,
        "verticalCenter": "middle",
        "horizontalCenter": "middle"
      },
      "grid": {
        "color": "#C0C0C0",
        "opacity": 0.7,
        "dashArray": "",
        "minDistance": 90,
        "position": 0.5
      },
      "font": {
        "size": 20,
        "weight": 500
      }
    }
  }
]

series:

[
  {
    "name": "last_week",
    "label": {
      "text": ""
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "a_last_week",
      "x": "t_stamp",
      "y": "units_num"
    },
    "xAxis": "time",
    "yAxis": "units",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "{name}: [bold]{valueY}[/]",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "",
        "opacity": 1
      }
    },
    "render": "column",
    "candlestick": {
      "open": {
        "x": "",
        "y": ""
      },
      "high": {
        "x": "",
        "y": ""
      },
      "low": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "",
          "opacity": 1
        },
        "stroke": {
          "color": "",
          "opacity": 1,
          "width": 1
        },
        "stacked": false,
        "deriveFieldsFromData": {
          "fill": {
            "color": "",
            "opacity": ""
          },
          "stroke": {
            "color": "",
            "opacity": "",
            "width": ""
          }
        },
        "heatRules": {
          "enabled": false,
          "max": "",
          "min": "",
          "dataField": ""
        }
      }
    },
    "column": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "#FF0000",
          "opacity": 1
        },
        "stroke": {
          "color": "",
          "opacity": 1,
          "width": 1
        },
        "width": null,
        "height": null,
        "stacked": false,
        "deriveFieldsFromData": {
          "fill": {
            "color": "",
            "opacity": ""
          },
          "stroke": {
            "color": "",
            "opacity": "",
            "width": ""
          }
        },
        "heatRules": {
          "enabled": false,
          "max": "",
          "min": "",
          "dataField": ""
        }
      }
    },
    "line": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "connect": true,
        "tensionX": 1,
        "tensionY": 1,
        "minDistance": 0.5,
        "stroke": {
          "width": 3,
          "opacity": 1,
          "color": "",
          "dashArray": ""
        },
        "fill": {
          "color": "",
          "opacity": 0
        },
        "bullets": [
          {
            "enabled": false,
            "render": "circle",
            "width": 10,
            "height": 10,
            "label": {
              "text": "{value}",
              "position": {
                "dx": 0,
                "dy": 0
              }
            },
            "tooltip": {
              "enabled": true,
              "text": "{name}: [bold]{valueY}[/]",
              "cornerRadius": 3,
              "pointerLength": 4,
              "background": {
                "color": "",
                "opacity": 1
              }
            },
            "fill": {
              "color": "",
              "opacity": 1
            },
            "stroke": {
              "color": "",
              "width": 1,
              "opacity": 1
            },
            "rotation": 0,
            "deriveFieldsFromData": {
              "fill": {
                "color": "",
                "opacity": ""
              },
              "stroke": {
                "color": "",
                "opacity": "",
                "width": ""
              },
              "rotation": ""
            },
            "heatRules": {
              "enabled": false,
              "max": 100,
              "min": 2,
              "dataField": ""
            }
          }
        ]
      }
    },
    "stepLine": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "connect": true,
        "tensionX": 1,
        "tensionY": 1,
        "minDistance": 0.5,
        "stroke": {
          "width": 3,
          "opacity": 1,
          "color": "",
          "dashArray": ""
        },
        "fill": {
          "color": "",
          "opacity": 0
        },
        "bullets": [
          {
            "enabled": true,
            "render": "circle",
            "width": 10,
            "height": 10,
            "label": {
              "text": "{value}",
              "position": {
                "dx": 0,
                "dy": 0
              }
            },
            "tooltip": {
              "enabled": true,
              "text": "{name}: [bold]{valueY}[/]",
              "cornerRadius": 3,
              "pointerLength": 4,
              "background": {
                "color": "",
                "opacity": 1
              }
            },
            "fill": {
              "color": "",
              "opacity": 1
            },
            "stroke": {
              "color": "",
              "width": 1,
              "opacity": 1
            },
            "rotation": 0,
            "deriveFieldsFromData": {
              "fill": {
                "color": "",
                "opacity": ""
              },
              "stroke": {
                "color": "",
                "opacity": "",
                "width": ""
              },
              "rotation": ""
            },
            "heatRules": {
              "enabled": false,
              "max": 100,
              "min": 2,
              "dataField": ""
            }
          }
        ]
      }
    }
  },
  {
    "name": "current_week",
    "label": {
      "text": ""
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "b_current_week",
      "x": "t_stamp",
      "y": "units_num"
    },
    "xAxis": "time",
    "yAxis": "units",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "{name}: [bold]{valueY}[/]",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "",
        "opacity": 1
      }
    },
    "render": "column",
    "candlestick": {
      "open": {
        "x": "",
        "y": ""
      },
      "high": {
        "x": "",
        "y": ""
      },
      "low": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "",
          "opacity": 1
        },
        "stroke": {
          "color": "",
          "opacity": 1,
          "width": 1
        },
        "stacked": false,
        "deriveFieldsFromData": {
          "fill": {
            "color": "",
            "opacity": ""
          },
          "stroke": {
            "color": "",
            "opacity": "",
            "width": ""
          }
        },
        "heatRules": {
          "enabled": false,
          "max": "",
          "min": "",
          "dataField": ""
        }
      }
    },
    "column": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "#000000",
          "opacity": 1
        },
        "stroke": {
          "color": "",
          "opacity": 1,
          "width": 1
        },
        "width": null,
        "height": null,
        "stacked": false,
        "deriveFieldsFromData": {
          "fill": {
            "color": "",
            "opacity": ""
          },
          "stroke": {
            "color": "",
            "opacity": "",
            "width": ""
          }
        },
        "heatRules": {
          "enabled": false,
          "max": "",
          "min": "",
          "dataField": ""
        }
      }
    },
    "line": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "connect": true,
        "tensionX": 1,
        "tensionY": 1,
        "minDistance": 0.5,
        "stroke": {
          "width": 3,
          "opacity": 1,
          "color": "",
          "dashArray": ""
        },
        "fill": {
          "color": "",
          "opacity": 0
        },
        "bullets": [
          {
            "enabled": false,
            "render": "circle",
            "width": 10,
            "height": 10,
            "label": {
              "text": "{value}",
              "position": {
                "dx": 0,
                "dy": 0
              }
            },
            "tooltip": {
              "enabled": true,
              "text": "{name}: [bold]{valueY}[/]",
              "cornerRadius": 3,
              "pointerLength": 4,
              "background": {
                "color": "",
                "opacity": 1
              }
            },
            "fill": {
              "color": "",
              "opacity": 1
            },
            "stroke": {
              "color": "",
              "width": 1,
              "opacity": 1
            },
            "rotation": 0,
            "deriveFieldsFromData": {
              "fill": {
                "color": "",
                "opacity": ""
              },
              "stroke": {
                "color": "",
                "opacity": "",
                "width": ""
              },
              "rotation": ""
            },
            "heatRules": {
              "enabled": false,
              "max": 100,
              "min": 2,
              "dataField": ""
            }
          }
        ]
      }
    },
    "stepLine": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "connect": true,
        "tensionX": 1,
        "tensionY": 1,
        "minDistance": 0.5,
        "stroke": {
          "width": 3,
          "opacity": 1,
          "color": "",
          "dashArray": ""
        },
        "fill": {
          "color": "",
          "opacity": 0
        },
        "bullets": [
          {
            "enabled": true,
            "render": "circle",
            "width": 10,
            "height": 10,
            "label": {
              "text": "{value}",
              "position": {
                "dx": 0,
                "dy": 0
              }
            },
            "tooltip": {
              "enabled": true,
              "text": "{name}: [bold]{valueY}[/]",
              "cornerRadius": 3,
              "pointerLength": 4,
              "background": {
                "color": "",
                "opacity": 1
              }
            },
            "fill": {
              "color": "",
              "opacity": 1
            },
            "stroke": {
              "color": "",
              "width": 1,
              "opacity": 1
            },
            "rotation": 0,
            "deriveFieldsFromData": {
              "fill": {
                "color": "",
                "opacity": ""
              },
              "stroke": {
                "color": "",
                "opacity": "",
                "width": ""
              },
              "rotation": ""
            },
            "heatRules": {
              "enabled": false,
              "max": 100,
              "min": 2,
              "dataField": ""
            }
          }
        ]
      }
    }
  },
  {
    "name": "week",
    "label": {
      "text": ""
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "trackers",
      "x": "t_stamp",
      "y": "units_num"
    },
    "xAxis": "time",
    "yAxis": "units",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "{name}: [bold]{valueY}[/]",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "",
        "opacity": 1
      }
    },
    "render": "column",
    "candlestick": {
      "open": {
        "x": "",
        "y": ""
      },
      "high": {
        "x": "",
        "y": ""
      },
      "low": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "",
          "opacity": 1
        },
        "stroke": {
          "color": "",
          "opacity": 1,
          "width": 1
        },
        "stacked": false,
        "deriveFieldsFromData": {
          "fill": {
            "color": "",
            "opacity": ""
          },
          "stroke": {
            "color": "",
            "opacity": "",
            "width": ""
          }
        },
        "heatRules": {
          "enabled": false,
          "max": "",
          "min": "",
          "dataField": ""
        }
      }
    },
    "column": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "",
          "opacity": 1
        },
        "stroke": {
          "color": "",
          "opacity": 1,
          "width": 1
        },
        "width": null,
        "height": null,
        "stacked": false,
        "deriveFieldsFromData": {
          "fill": {
            "color": "",
            "opacity": ""
          },
          "stroke": {
            "color": "",
            "opacity": "",
            "width": ""
          }
        },
        "heatRules": {
          "enabled": false,
          "max": "",
          "min": "",
          "dataField": ""
        }
      }
    },
    "line": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "connect": true,
        "tensionX": 1,
        "tensionY": 1,
        "minDistance": 0.5,
        "stroke": {
          "width": 3,
          "opacity": 1,
          "color": "",
          "dashArray": ""
        },
        "fill": {
          "color": "",
          "opacity": 0
        },
        "bullets": [
          {
            "enabled": false,
            "render": "circle",
            "width": 10,
            "height": 10,
            "label": {
              "text": "{value}",
              "position": {
                "dx": 0,
                "dy": 0
              }
            },
            "tooltip": {
              "enabled": true,
              "text": "{name}: [bold]{valueY}[/]",
              "cornerRadius": 3,
              "pointerLength": 4,
              "background": {
                "color": "",
                "opacity": 1
              }
            },
            "fill": {
              "color": "",
              "opacity": 1
            },
            "stroke": {
              "color": "",
              "width": 1,
              "opacity": 1
            },
            "rotation": 0,
            "deriveFieldsFromData": {
              "fill": {
                "color": "",
                "opacity": ""
              },
              "stroke": {
                "color": "",
                "opacity": "",
                "width": ""
              },
              "rotation": ""
            },
            "heatRules": {
              "enabled": false,
              "max": 100,
              "min": 2,
              "dataField": ""
            }
          }
        ]
      }
    },
    "stepLine": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "connect": true,
        "tensionX": 1,
        "tensionY": 1,
        "minDistance": 0.5,
        "stroke": {
          "width": 3,
          "opacity": 1,
          "color": "",
          "dashArray": ""
        },
        "fill": {
          "color": "",
          "opacity": 0
        },
        "bullets": [
          {
            "enabled": true,
            "render": "circle",
            "width": 10,
            "height": 10,
            "label": {
              "text": "{value}",
              "position": {
                "dx": 0,
                "dy": 0
              }
            },
            "tooltip": {
              "enabled": true,
              "text": "{name}: [bold]{valueY}[/]",
              "cornerRadius": 3,
              "pointerLength": 4,
              "background": {
                "color": "",
                "opacity": 1
              }
            },
            "fill": {
              "color": "",
              "opacity": 1
            },
            "stroke": {
              "color": "",
              "width": 1,
              "opacity": 1
            },
            "rotation": 0,
            "deriveFieldsFromData": {
              "fill": {
                "color": "",
                "opacity": ""
              },
              "stroke": {
                "color": "",
                "opacity": "",
                "width": ""
              },
              "rotation": ""
            },
            "heatRules": {
              "enabled": false,
              "max": 100,
              "min": 2,
              "dataField": ""
            }
          }
        ]
      }
    }
  }
]
````Preformatted text`
12

you can copy the whole component at once, but oke this will do i guess xd

Ah this is not the original, but the one you attmpted to change?
give me the original one

13

@victordcq, yes it is the example (not the original), because the original has bindings.

Please find the original attached (too many characters for posting it).
original.txt (36.0 KB)

14

yh nvm it doesnt work with bindings xd

15

@victordcq I do not really get what you mean with “yh nvm”.

I can change the bindings for fixed values if you need it.

16

Starting from your base again.

Add a datasource (2) with the two columns you want in a different color. (avg-day/week)
Set these values (avg-day/week) in the first datasrouce (trackers) to 0
Create a series with datasource (2), with a different color.
Set series[2].column.appearance.stacked = true (to get not get the white space)

image

[
  {
    "type": "ia.chart.xy",
    "version": 0,
    "props": {
      "xAxes": [
        {
          "name": "time",
          "label": {
            "enabled": true,
            "text": "Time",
            "color": ""
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "date",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy-MM-dd kk:mm:ss",
            "format": "M/d"
          },
          "value": {
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": false,
            "inside": false,
            "labels": {
              "color": "",
              "opacity": 1,
              "rotation": 0,
              "verticalCenter": "middle",
              "horizontalCenter": "middle"
            },
            "grid": {
              "color": "",
              "opacity": 1,
              "dashArray": "",
              "minDistance": 60,
              "position": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "yAxes": [
        {
          "name": "process temp",
          "label": {
            "enabled": true,
            "text": "Process Temp",
            "color": ""
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "value",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy-MM-dd kk:mm:ss",
            "format": "M/d/yyyy HH:mm:ss"
          },
          "value": {
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": false,
            "inside": false,
            "labels": {
              "color": "",
              "opacity": 1,
              "rotation": 0,
              "verticalCenter": "middle",
              "horizontalCenter": "middle"
            },
            "grid": {
              "color": "",
              "opacity": 1,
              "dashArray": "",
              "minDistance": null,
              "position": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "series": [
        {
          "name": "process temp",
          "label": {
            "text": "Process Temp"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "example",
            "x": "t_stamp",
            "y": "process_temp"
          },
          "xAxis": "time",
          "yAxis": "process temp",
          "zIndex": 0,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{valueY}[/]",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "render": "column",
          "candlestick": {
            "open": {
              "x": "",
              "y": ""
            },
            "high": {
              "x": "",
              "y": ""
            },
            "low": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "column": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": true,
              "width": null,
              "height": null,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "line": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": false,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          },
          "stepLine": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          }
        },
        {
          "name": "avg",
          "label": {
            "text": "avg"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "example_1",
            "x": "t_stamp",
            "y": "process_temp"
          },
          "xAxis": "time",
          "yAxis": "process temp",
          "zIndex": 0,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{valueY}[/]",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "render": "column",
          "candlestick": {
            "open": {
              "x": "",
              "y": ""
            },
            "high": {
              "x": "",
              "y": ""
            },
            "low": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "column": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": true,
              "width": null,
              "height": null,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "line": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": false,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          },
          "stepLine": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          }
        }
      ],
      "dataSources": {
        "example": [
          {
            "t_stamp": "Tue Aug 07 2018",
            "process_temp": 0,
            "output_temp": 0
          },
          {
            "t_stamp": "Tue Aug 08 2018",
            "process_temp": 0,
            "output_temp": 0
          },
          {
            "t_stamp": "Tue Aug 09 2018",
            "process_temp": 62,
            "output_temp": 41
          },
          {
            "t_stamp": "Tue Aug 09 2018",
            "process_temp": 62,
            "output_temp": 41
          },
          {
            "t_stamp": "Tue Aug 10 2018",
            "process_temp": 63,
            "output_temp": 37
          },
          {
            "t_stamp": "Tue Aug 11 2018",
            "process_temp": 48,
            "output_temp": 31
          },
          {
            "t_stamp": "Tue Aug 12 2018",
            "process_temp": 54,
            "output_temp": 42
          },
          {
            "t_stamp": "Tue Aug 13 2018",
            "process_temp": 49,
            "output_temp": 38
          },
          {
            "t_stamp": "Tue Aug 14 2018",
            "process_temp": 69,
            "output_temp": 34
          },
          {
            "t_stamp": "Tue Aug 15 2018",
            "process_temp": 73,
            "output_temp": 56
          },
          {
            "t_stamp": "Tue Aug 16 2018",
            "process_temp": 61,
            "output_temp": 32
          }
        ],
        "example_1": [
          {
            "t_stamp": "Tue Aug 07 2018",
            "process_temp": 63,
            "output_temp": 38
          },
          {
            "t_stamp": "Tue Aug 08 2018",
            "process_temp": 59,
            "output_temp": 39
          }
        ]
      }
    },
    "meta": {
      "name": "XYChart_1"
    },
    "position": {
      "x": 12,
      "y": 533,
      "height": 375,
      "width": 435
    },
    "custom": {}
  }
]
1 Like
17

I'm pretty sure that's millennial-speak for "yeah, never mind".

4 Likes
18

Exactly what I needed! “stacked” property was the key I was looking for. Thanks!!!

3 Likes