html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create quadrant chart

  var chart = anychart.quadrant();

  // set chart padding

  chart.padding([10, 30, 30, 30]);

​

  // set chart title text settings

  chart.title('Eisenhower Matrix');

​

  // set legend settings

  chart.legend().enabled(true).padding([0, 0, 30, 0]).margin(0);

​

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/samples/quadrant-charts/eisenhower-matrix/data.js

  // create series with data

  var series1 = chart.marker(

    // eslint-disable-next-line no-undef

    anychart.data.set(getFamilyBusinessData()).mapAs({

      x: 'urgent',

      value: 'important'

    })

  );

  series1

    .name('Family')

    .stroke('2px #fff')

    .type('circle')

    .size(8)

    .selectionMode('none')

    .legendItem({ iconType: 'circle' });

​

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/samples/quadrant-charts/eisenhower-matrix/data.js

  var series2 = chart.marker(

    // eslint-disable-next-line no-undef

    anychart.data.set(getWorkBusinessData()).mapAs({

      x: 'urgent',

      value: 'important'

    })

  );

  series2

    .name('Business')

    .stroke('2px #fff')

    .type('circle')

    .size(8)

    .selectionMode('none')

    .legendItem({ iconType: 'circle' });

​

  // set chart labels settings

  chart

    .labels()

    .enabled(true)

    .fontFamily('Arial')

    .position('right')

    .anchor('left-center')

    .offsetX(8)

    .offsetY(0)

    .format('{%Name}');

​

  // set tooltip format

  chart.tooltip().format('{%Description}');

​

  // set quarters settings

  chart.quarters({

    rightTop: {

      fill: '#fff',

      title: {

        useHtml: true,

        fontSize: 12,

        lineHeight: 1.2,

        text:

          'Urgent and important<br><span style="color: #2d4053;">DO IMMEDIATELY</span>',

        background: {

          fill: '#ECECEC',

          stroke: anychart.color.darken('#ECECEC', 0.2)

        },

        fontColor: '#929292',

        padding: [5, 10]

      }

    },

    rightBottom: {

      title: {

        useHtml: true,

        fontSize: 12,

        lineHeight: 1.2,

        text:

          'Urgent, not important<br><span style="color: #2d4053;">DELEGATE</span>',

        background: {

          fill: '#ECECEC',

          stroke: anychart.color.darken('#ECECEC', 0.2)

        },

        fontColor: '#929292',

        padding: [5, 10]

      }

    },

    leftTop: {

      title: {

        useHtml: true,

        fontSize: 12,

        lineHeight: 1.2,

        text:

          'Important, but not urgent<br><span style="color: #2d4053;">DECIDE WHEN WILL DO</span>',

        background: {

          fill: '#ECECEC',

          stroke: anychart.color.darken('#ECECEC', 0.2)

        },

        fontColor: '#929292',

        padding: [5, 10]

      }

    },

    leftBottom: {

      fill: '#fff',

      title: {

        useHtml: true,

        fontSize: 12,

        lineHeight: 1.2,

        text:

          'Not important, not urgent<br><span style="color: #2d4053;">DO LATER</span>',

        background: {

          fill: '#ECECEC',

          stroke: anychart.color.darken('#ECECEC', 0.2)

        },

        fontColor: '#929292',

        padding: [5, 10]

      }

    }

  });

​

  // set chart container id

  chart.container('container');

  // initiate chart drawing

  chart.draw();

});