CODEWITHSUNDEEP
javascriptangularjshighcharts
Satyanarayana
Satyanarayana

Reputation: 43

How to draw the below chart using highchart?

Please help me with how can we draw the below chart using highchart.

Upvotes: 2

Views: 113

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

I am almost sure that I already answered this question here, but I cannot find it.

Anyway - to split the chart use the yAxis and xAxis plotLines which position you can calculate dynamically in the load callback.

  chart: {
    events: {
      load() {
        const chart = this,
          yAxis = chart.yAxis[0],
          xAxis = chart.xAxis[0];

        xAxis.addPlotLine({
          value: (xAxis.max + xAxis.min) / 2,
          color: 'grey',
          width: 2,
          dashStyle: 'dash'
        });

        yAxis.addPlotLine({
          value: (yAxis.max + yAxis.min) / 2,
          color: 'grey',
          width: 2,
          dashStyle: 'dash'
        });
      }
    }
  },

Demo: https://jsfiddle.net/BlackLabel/5xL7o1kg/

API: https://api.highcharts.com/class-reference/Highcharts.Axis#addPlotLine

To color, the part of the split area use the polygon series type.

Demo: https://jsfiddle.net/BlackLabel/7smLnqad/

chart.addSeries({
  type: 'polygon',
  data: [
    [xAxis.min, yAxis.min],
    [(xAxis.max + xAxis.min) / 2, yAxis.min],
    [(xAxis.max + xAxis.min) / 2, (yAxis.max + yAxis.min) / 2],
    [xAxis.min, (yAxis.max + yAxis.min) / 2],
  ],
  color: 'rgba(244, 198, 245, 0.5)',
  showInLegend: false,
  enableMouseTracking: false,
})

API: https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

Upvotes: 2

Related Questions