CODEWITHSUNDEEP
zingchart
Nikita. A.
Nikita. A.

Reputation: 410

Zingchart how to add custom legend item

I have a bar chart with 3 kinds of bar: FOO, BAR and BAZ.

Horizontal axis are quarters.

enter image description here

BAR and BAZ use the same series. BAR (blue) becoming BAZ (orange) after Q1-17.

"rules": [{
    "rule": "%kv > 1",
    "background-color":"orange"
}]

How can I add BAZ (orange) to the legend? 

zingchart.THEME = "classic";
var myConfig = {
  "graphset": [{
    "type": "bar",
    "background-color": "white",
    "plotarea": {
      "margin": "80 60 100 60",
      "y": "125px"
    },
    "legend": {
      "layout": "x3",
      "y": "13%",
      "x": "34.5%",
      "overflow": "page",
      "toggle-action": "remove",
    },
    "scale-x": {
      "labels": [
        "Q4-16",
        "Q1-17",
        "Q2-17",
        "Q3-17"
      ],
      "markers": [{
        "value-range": true,
        "range": [1.5],
        "line-color": "red",
        "line-width": 1,
        "line-style": "solid",
        "type": "line"
      }]
    },
    "series": [{
        "values": [
          37.47,
          57.59,
          45.65,
          37.43
        ],
        "background-color": "#8993c7",
        "text": "FOO"
      },
      {
        "values": [
          13.4,
          14.11,
          14.89,
          16.86
        ],
        "background-color": "blue",
        "text": "BAR",
        "rules": [{
          "rule": "%kv > 1",
          "background-color": "orange"
        }]
      }
    ]
  }]
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 500,
  width: 725
});
.zc-ref {
  display: none;
}
<html>

<head>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <script>
    zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "ee6b7db5b51705a13dc2339db3edaf6d"];
  </script>
</head>

<body>
  <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
</body>

</html>

Upvotes: 1

Views: 630

Answers (1)

nardecky
nardecky

Reputation: 2631

So one way to do it is split up your data. The easiest way to explain this is to make another series for "BAZ" and in the first two quarters have null values.

demo here

The main reason for doing it this way is maintaining the built in legend toggling functionality. This way when you click it wont turn off the whole series (blue and orange bars.) Which I assume is the intended functionality.

If you don't mind turning off blue and orange bars at the same time you can do the following to add another legend item. Add the text and color inside the series object. Essentially, create a blank series object.

      ...{
        "text":"BAZ",
        "background-color":"orange"
      }...

non interactive legend demo here

If you are looking for something in between these two demos it will take some custom Javascript using the ZingChart API.

Upvotes: 2

Related Questions