Point Styling

Point Styling - 图1

pointStyle: circle (default)pointStyle: crosspointStyle: crossRotpointStyle: dashpointStyle: linepointStyle: rectpointStyle: rectRoundedpointStyle: rectRotpointStyle: starpointStyle: trianglepointStyle: false

config setup actions

  1. const config = {
  2.   type: 'line',
  3.   data: data,
  4.   options: {
  5.     responsive: true,
  6.     plugins: {
  7.       title: {
  8.         display: true,
  9.         text: (ctx) => 'Point Style: ' + ctx.chart.data.datasets[0].pointStyle,
  10.       }
  11.     }
  12.   }
  13. };
  1. const data = {
  2.   labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
  3.   datasets: [
  4.     {
  5.       label: 'Dataset',
  6.       data: Utils.numbers({count: 6, min: -100, max: 100}),
  7.       borderColor: Utils.CHART_COLORS.red,
  8.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  9.       pointStyle: 'circle',
  10.       pointRadius: 10,
  11.       pointHoverRadius: 15
  12.     }
  13.   ]
  14. };
  1. const actions = [
  2.   {
  3.     name: 'pointStyle: circle (default)',
  4.     handler: (chart) => {
  5.       chart.data.datasets.forEach(dataset => {
  6.         dataset.pointStyle = 'circle';
  7.       });
  8.       chart.update();
  9.     }
  10.   },
  11.   {
  12.     name: 'pointStyle: cross',
  13.     handler: (chart) => {
  14.       chart.data.datasets.forEach(dataset => {
  15.         dataset.pointStyle = 'cross';
  16.       });
  17.       chart.update();
  18.     }
  19.   },
  20.   {
  21.     name: 'pointStyle: crossRot',
  22.     handler: (chart) => {
  23.       chart.data.datasets.forEach(dataset => {
  24.         dataset.pointStyle = 'crossRot';
  25.       });
  26.       chart.update();
  27.     }
  28.   },
  29.   {
  30.     name: 'pointStyle: dash',
  31.     handler: (chart) => {
  32.       chart.data.datasets.forEach(dataset => {
  33.         dataset.pointStyle = 'dash';
  34.       });
  35.       chart.update();
  36.     }
  37.   },
  38.   {
  39.     name: 'pointStyle: line',
  40.     handler: (chart) => {
  41.       chart.data.datasets.forEach(dataset => {
  42.         dataset.pointStyle = 'line';
  43.       });
  44.       chart.update();
  45.     }
  46.   },
  47.   {
  48.     name: 'pointStyle: rect',
  49.     handler: (chart) => {
  50.       chart.data.datasets.forEach(dataset => {
  51.         dataset.pointStyle = 'rect';
  52.       });
  53.       chart.update();
  54.     }
  55.   },
  56.   {
  57.     name: 'pointStyle: rectRounded',
  58.     handler: (chart) => {
  59.       chart.data.datasets.forEach(dataset => {
  60.         dataset.pointStyle = 'rectRounded';
  61.       });
  62.       chart.update();
  63.     }
  64.   },
  65.   {
  66.     name: 'pointStyle: rectRot',
  67.     handler: (chart) => {
  68.       chart.data.datasets.forEach(dataset => {
  69.         dataset.pointStyle = 'rectRot';
  70.       });
  71.       chart.update();
  72.     }
  73.   },
  74.   {
  75.     name: 'pointStyle: star',
  76.     handler: (chart) => {
  77.       chart.data.datasets.forEach(dataset => {
  78.         dataset.pointStyle = 'star';
  79.       });
  80.       chart.update();
  81.     }
  82.   },
  83.   {
  84.     name: 'pointStyle: triangle',
  85.     handler: (chart) => {
  86.       chart.data.datasets.forEach(dataset => {
  87.         dataset.pointStyle = 'triangle';
  88.       });
  89.       chart.update();
  90.     }
  91.   },
  92.   {
  93.     name: 'pointStyle: false',
  94.     handler: (chart) => {
  95.       chart.data.datasets.forEach(dataset => {
  96.         dataset.pointStyle = false;
  97.       });
  98.       chart.update();
  99.     }
  100.   }
  101. ];

Docs