Drawing Shapes

ReactiveChart allows you to add your custom shapes to a chart. For example, we can add a rectangle to the primary viewport of the chart as follows:

  
  var config = ReactiveChart.reactive({
    element: "_chart1",
    type: "x",
    xAxis: {
      type: "discrete",
      categories: ["A", "B", "C", "D"]
    },
    series: {
      shape: "column",
      series: [{
        data: [1, 2, 3, 4],
        id: "series 1"
      }, {
        data: [2, 4, 2, 1],
        id: "series 2"
      }]
    },
    viewport: {
      shape: {
        tag: "rectangle",
        x: 0.5,
        y: 0,
        height: 4,
        width: 2,
        style: {
          fillStyle: "rgba(0, 0, 200, 0.3)"
        }
      }
    }
  });
  var chart = ReactiveChart.chart(config);
  

When adding a shape to the viewport, it will use the coordinate system represented by the x- and y-axis.

Currently, you can draw a rectangle, line, point or add any custom html:

  
  var chart = ReactiveChart.chart({
        element: "_chart3",
        type: "x",
        xAxis: {
            type: "discrete",
            categories: ["A", "B", "C", "D"]
        },
        series: {
            shape: "column",
            series: [{
                data: [1, 2, 3, 4, 5, 6, 7, 8],
                id: "series 1"
            }]
        },
        viewport: {
            shape: {
                tag: "g",
                child: [{
                    tag: "rectangle",
                    x: 1,
                    y: 1,
                    height: 2,
                    width: 2,
                    style: {
                        fillStyle: "rgb(200, 0, 0)"
                    }
                },
                    {
                        tag: "point",
                        x: 4, y: 6,
                        radius: 40,
                        style: {
                            fillStyle: "rgb(200, 0, 0)"
                        }
                    },
                    {
                        tag: "line",
                        start: {
                            x: 1, y: 7
                        },
                        end: {
                            x: 5, y: 4
                        },
                        style: {
                            strokeStyle: "rgb(200, 0, 0)",
                            lineWidth: 4
                        }
                    },
                    {
                        tag: "html",
                        x: 6,
                        y: 2,
                        valig: "bottom",
                        html: {
                            tag: "button",
                            style: {
                                whiteSpace: "nowrap"
                            },
                            child: "A html button"
                        }
                    }]
            }
        }
    });

You can also add shapes relative to the top left corner of the chart by specifying the shape setting:

  
  var chart = ReactiveChart.chart({
    element: "_chart5",
    type: "x",
    xAxis: {
      type: "discrete",
      categories: ["A", "B", "C", "D"]
    },
    series: {
      shape: "column",
      series: [{
        data: [1, 2, 3, 4, 5, 6, 7, 8],
        id: "series 1"
      }]
    },
    shape: {
      tag: "rectangle",
      x: 0,
      y: 0,
      height: 100,
      width: 100,
      style: {
        fillStyle: "rgb(200, 0, 0)"
      }
    }
  });
  

The coordinate system in the case starts at the top/left position of the chart, like the standard canvas coordinate system.